漂浮在CSS使元素下移

<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>

漂浮在CSS使元素下移

在我试图使上述页面时，“searchbardiv”往往当我降低了浏览器窗口的大小，以低于移动“logobardiv”。

我只是想要两个div在同一行。我尝试使用“float：left”，但它没有给出所需的结果。

来源

2015-04-01 Flake

我想搜索栏的大小是一样的，不管是什么屏幕尺寸。 – Flake 2015-04-01 11:29:27

谢谢大家帮助我！ – Flake 2015-04-01 11:29:47

而不是使用浮动，请尝试使用display: inline-block为两个子元素和white-space: nowrap保持它们在同一行上。

应用display: inline-block既#logobardiv和#searchbardiv和（根据需要或其它值）适用于vertical-align: middle#logobardiv采取任何垂直对齐问题护理。

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

请注意，对于足够小的屏幕，您可以进行水平滚动。为了解决这个问题，你需要做出设计决定来处理这种情况。您可以使搜索输入宽度更小或标识更小，或者两者都可以，也许可以使用％宽度来使它们响应。您有几个选项可用来解决问题。

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>

来源

2015-04-01 10:49:51

我正在尝试为练习创建一个游戏商店的副本。而且看起来你的解决方案是完美的。只要我想要的方式。 – Flake 2015-04-01 11:28:33

你给你的搜索栏宽545px尽量减少这种小屏幕使用媒体查询时：如

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

希望这有助于所以它显示

来源

2015-04-01 10:42:27

搜索栏的尺寸过足够长的时间在下一行。设置徽标大小和搜索栏宽度，以％为单位。

width:70%;

Fiddle

来源

2015-04-01 10:44:36 user3386779

解决方案1：

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

解决方案2：如果你想的div是灵活如使用％，而非像素的宽度，如果你不想要的div来用屏幕调整大小，将它们设置为表单元格：

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

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


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

来源

2015-04-01 10:49:43

漂浮在CSS使元素下移

回答

相关问题