浮动 CSS 导致元素向下移动

Question

<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" 以下 window。

我只想让两个 div 位于同一个 line.I 尝试使用 "float:left"，但没有给出所需的结果。

Answer 1

你给你的搜索栏宽度 545px 尝试在小屏幕上使用媒体查询时减少它：例如

@media(max-width:768px) {
     #searchbar{
      width:200px;
    }

希望对您有所帮助

Answer 2

搜索栏太长，因此显示在下一个 line.Set 徽标大小和搜索栏宽度的百分比中。

  width:70%;

Fiddle

Answer 3

解决方案 1：如果您希望 div 具有灵活性，请使用 % 而不是像素作为宽度，例如：

  #searchbar{
    height:28px;
    width:80%;
    font-size:1em;
    }

解决方案 2：如果您不希望 div 随屏幕调整大小，请将它们设置为 table 单元格：

  #upperbar{
/* your current styles here */
display:table;
    }

  #logobardiv{
/* your current styles here */
display:table-cell
    }


#searchbardiv{
/* your current styles here */
display:table-cell
}

Answer 4

不要使用浮点数，而是尝试对两个子元素使用 display: inline-block 并使用 white-space: nowrap 使它们保持在同一行。

将display: inline-block应用于#logobardiv和#searchbardiv并将vertical-align: middle（或其他需要的值）应用于#logobardiv以处理任何垂直对齐问题。

最后，将 white-space: nowrap 应用于 #upperbar 以使两个子元素保持在同一行。

请注意，对于足够小的屏幕，您可以水平滚动。要解决此问题，您需要做出设计决策来处理这种情况。您可以使搜索输入宽度更小或徽标更小或两者兼而有之，也许可以使用 % 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>

浮动 CSS 导致元素向下移动

Float in CSS causing element to move down

html

css

css-float