漂浮在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使元素下移

回答

相關問題