<html>
<head>
<title>My Play Store</title>
<style type="text/css">
body{
margin:0;
}
#container{
min-width:1080px;
}
#upperbar{
background-color:#F1F1F1;
height:60px;
width:100%;
}
#logobardiv{
margin:10px 20px 10px 30px;
float:LEFT;
}
#logo{
height:39px;
width:183px;
}
#searchbardiv{
float:left;
padding:15px 0px 15px 10px;
}
#searchbar{
height:28px;
width:545px;
font-size:1em;
}
</style>
</head>
<body>
<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="images/logo.png"/>
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search"/>
</div>
</div>
</div>
</body>
在我试图制作的上述页面中，当我减小浏览器窗口的大小时，“searchbardiv”往往会移动到“logobardiv”下方。
我只想让两个 div 在同一行。我尝试使用“float:left”，但它没有给出所需的结果。
最佳答案
不要使用 float ，而是尝试对两个子元素使用 display: inline-block 并使用 white-space: nowrap 使它们保持在同一行。
将 display: inline-block 应用于 #logobardiv 和 #searchbardiv 并应用 vertical-align: middle(或其他需要的值)到 #logobardiv 以处理任何垂直对齐问题。
最后，将 white-space: nowrap 应用于 #upperbar 以使两个子元素保持在同一行。
请注意，对于足够小的屏幕，您可以水平滚动。要解决此问题，您需要做出设计决策来处理这种情况。您可以使搜索输入宽度更小或 Logo 更小或两者兼而有之，也许可以使用 % widths 而不是使它们具有响应性。您有几个选项可以解决问题。
body {
margin: 0;
}
#container {
min-width: 1080px;
}
#upperbar {
background-color: #F1F1F1;
height: 60px;
width: 100%;
white-space: nowrap;
}
#logobardiv {
margin: 10px 20px 10px 30px;
display: inline-block;
vertical-align: middle;
}
#logo {
height: 39px;
width: 183px;
}
#searchbardiv {
display: inline-block;
padding: 15px 0px 15px 10px;
}
#searchbar {
height: 28px;
width: 545px;
font-size: 1em;
}<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="http://placehold.it/183/39" />
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search" />
</div>
</div>
</div>关于html - 在 CSS 中 float 导致元素向下移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29388617/