输入文本框移动到新行
我似乎有一个问题，关于移动我的文本框回到原来的部门。每次我把搜索栏放回那个区域。我试图制作英国广播公司新闻网站，但似乎不起作用。
当我尝试将搜索栏放置在正确的区域时，它会将其移动到新行中。
我希望它看起来像BBC新闻网站上的酒吧。
body {
margin: 0;
padding: 0;
background-color: #ffffff;
font-family: Helvetica, Arial, sans-serif;
}
#nav-bar {
width: 1000px;
margin: 0 auto;
height: 40px;
background-color: inherit;
/* NOTE: Temporary color untill logo is adjusted. */
}
#logo {
margin: 10px 8px 10px 10px;
width: 100px;
float: left;
}
#signin-image {
width: 25px;
margin: 13px 10px;
float: left;
}
#signin-text {
font-weight: bold;
font-size: 90%;
position: relative;
top: 16px;
padding-right: 50px;
}
#divider-alt {
float: left;
height: 40px;
}
#bell-div {
float: left;
}
#bell {
height: 25px;
margin: 10px 10px;
}
.topbar-section {
float: left;
border-left: 1px #cccccc solid;
height: 100%;
}
.topbar-menu {
font-weight: bold;
font-size: 90%;
padding: 13px 15px 0px 15px;
height: 27px;
}
#more-arrow {
width: 16px;
margin-left: 15px;
}
#search-box {
background-color: #e4e4e4;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px 0 5px 5px;
float: left;
}
#magnifying-glass {
height: 27px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Technology - BBC News</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="nav-bar">
<img id="logo" src="img/bbc-logo.png">
<div id="sign-in" class="topbar-section">
<img id="signin-image" src="img/signin-icon.png" alt="">
<span id="signin-text">Sign in</span>
</div>
<div id="bell-div">
<img id="divider-alt" src="img/divider-alt.png" alt="">
<img id="bell" src="img/bell.png" alt="">
</div>
<div class="topbar-section topbar-menu">
News
</div>
<div class="topbar-section topbar-menu">
Sport
</div>
<div class="topbar-section topbar-menu">
Weather
</div>
<div class="topbar-section topbar-menu">
iPlayer
</div>
<div class="topbar-section topbar-menu">
TV
</div>
<div class="topbar-section topbar-menu">
Radio
</div>
<div class="topbar-section topbar-menu">
<span>More</span>
<img src="img/more-arrow.png" id="more-arrow">
</div>
<div class="topbar-section topbar-menu">
<input id="search-box" type="text" value="Search">
<img id="magnifying-glass" src="img/search.png" alt="">
</div>
</div>
<div id="mid-bar">
</div>
<div id="news-anchor">
</div>
</body>
</html>共有2个答案
或者你可以增加宽度
#nav-bar {
width: 1020px;
........
或者（如果不想增加宽度）
.topbar-menu {
.........
padding:15px 13px 0px 13px
.........}
试试这些
您需要在导航栏中增加一些宽度，这样所有的div都可以容纳它。尝试放置1040px。
-
我有一个带有6个EditText的辅助功能...该活动运行良好，但我需要单击每个EditText来填充它... 如何使enter键将焦点更改为另一个EditText？ 我已经试过了 1.我已经在每个EditText上设置了OnKeyListener。 但是，当我单击enter键时，在焦点更改为另一个EditText之前，会在前一个EditText上创建一行。 2.我已经将添加到每个EditText
-
我正在为一个网站使用引导程序编写一个wordpress主题。如果将窗口大小调整为移动设备的大小，那么navbar上的搜索输入在桌面/平板电脑上看起来很好。输入框和搜索按钮不再内联。有什么想法吗？ http://breakingborderline.co.uk/ 肚脐 搜索表单 谢谢
-
主要内容：创建文本域,TextField文本,示例-1,实例-2,实例-3用于单行文本输入。请看下面的示例 - 和字段扩展了类，它是JavaFX中所有文本控件的超类。 上面的代码生成以下结果。 创建文本域 我们可以使用类的构造函数来创建文本字段。 只是一个带有光标的文本输入框，通常我们需要一个控件来告诉文本字段的目的。以下代码创建一个控件来标记对应的文本字段是用于名称输入。然后它创建一个对象。之后，它使用HBox布局和。 使用预定义文本创建文本字段。 TextField
-
在上一节我们讲到了 TextView，它用来显示一段文本。这一节可以算作成是 TextView 的延续，因为从功能上 EditText 在 TextView 的基础之上多了一个输入的功能；从代码上 EditText 是继承自 TextView 的子类，所以我们可以大胆的理解为， EditText 是一种带有输入功能的高级 TextView。 1. EditText 的特性 在学习过 TextVie
-
文本输入框和文本输入域使用标准的html标记的，然后Jquery Mobile会让他们变得更吸引人而且易于触摸使用 要使用输入标准文字的输入框，给input增加type="text"属性。注意要把label的for属性设为input的id值，使他们能够在语义上相关联，并且要用div容器包裹它们，并给他设定data-role="fieldcontain"属性 HTML 代码: <div data-r
-
问题内容： 我有一个使用react native创建的登录屏幕。 当用户输入textInput时，如何将屏幕上移？ 我是否要监听onFocus（）事件并使用css样式来更改视图？ 问题答案： 在2017年（RN 0.43），这方面有特殊的组成部分: KeyboardAvoidingView