HTML - 如何設置浮動元素的寬度爲其父文件夾的100％？

-1

body{ 
 
\t \t \t margin:0; 
 
\t \t } 
 
\t \t #navbar{ 
 
\t \t \t background-color:red; 
 
\t \t \t height:70px; 
 
\t \t \t 
 
\t \t \t width:80%; 
 
\t \t \t margin:auto; 
 
\t \t } 
 
\t \t #search{ 
 
\t \t \t width:100%; 
 
\t \t } 
 
\t \t #element1{ 
 
\t \t \t height: 100%; 
 
\t \t \t float:left; 
 
\t \t \t background-color:green; 
 
\t \t \t display: table; 
 
\t \t } 
 
\t \t #element2{ 
 
\t \t  height: 100%; 
 
\t \t \t float:left; 
 
\t \t \t background-color:yellow; 
 
\t \t \t display: table; 
 
\t \t } 
 
\t \t .v_center{ 
 
\t \t \t display: table-cell; 
 
\t \t \t vertical-align: middle; 
 
\t \t \t border-style: solid; 
 
\t \t \t width:100%; 
 
\t \t }

<!DOCTYPE HTML> 
 
<HEAD> 
 
\t <link rel="stylesheet" href="style.css" /> 
 
</HEAD> 
 
<BODY> 
 
\t <div id="navbar"> 
 
\t \t <!--<img src="http://www.findwatchdeals.com/media/logo.png" width="100px" height="50px"/> 
 
\t \t <input type="search" id="search"/> --> 
 
\t \t <div id="element1" > 
 
\t \t \t <div class="v_center"> 
 
\t \t \t \t test 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div id="element2" > 
 
\t \t \t <div class="v_center"> 
 
\t \t \t \t <input type="search" id=#search/> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <br style="clear:both;"/> 
 
\t </div> 
 
</BODY 
 
</HTML>

這是結果：

我怎樣才能讓＃element2的100％的寬度，這樣的：

我想我需要擺脫'浮動：左'，但沒有它，他們不在彼此旁邊對齊。有人能幫我嗎？

來源

2017-03-16 float

'＃{部件1寬度：10％;}＃{element2的寬度：90％;}' – domsson

這裏是爲了做到這一點的最好辦法。使用flex而不是table。

檢查您的HTML，您以錯誤的方式定義了ID。應該是這樣的：

<input type="search" id="search">

我編輯了您的代碼段。請

* { 
 
box-sizing: border-box; //add this 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 

 
#navbar { 
 
    background-color: red; 
 
    height: 70px; 
 
    width: 80%; 
 
    margin: auto; 
 
} 
 

 
#search { 
 
    width: 100%; 
 
} 
 

 
#element1 { 
 
    height: 100%; 
 
    float: left; 
 
    background-color: green; 
 
    //display: table; 
 
    //width: 20%; 
 
} 
 

 
#element2 { 
 
    height: 100%; 
 
    background-color: yellow; 
 
    overflow: hidden; 
 
    //display: table; 
 
    //width: 80%; 
 
    
 
} 
 

 
.v_center { 
 
    //display: table-cell; 
 
    //vertical-align: middle; 
 
    border-style: solid; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
}

<!DOCTYPE HTML> 
 

 
<HEAD> 
 
    <link rel="stylesheet" href="style.css" /> 
 
</HEAD> 
 

 
<BODY> 
 
    <div id="navbar"> 
 
    <!--<img src="http://www.findwatchdeals.com/media/logo.png" width="100px" height="50px"/> 
 
\t \t <input type="search" id="search"/> --> 
 
    <div id="element1"> 
 
     <div class="v_center"> 
 
     test 
 
     </div> 
 
    </div> 
 
    <div id="element2"> 
 
     <div class="v_center"> 
 
     <input type="search" id="search"> 
 
     </div> 
 
    </div> 
 
    <br style="clear:both;" /> 
 
    </div> 
 
</BODY </HTML>

來源

2017-03-16 13:51:22 Lucian

謝謝！唯一的問題是元素沒有在中間垂直對齊。 – float

再次檢查。我不知道爲什麼，但評論造成了問題。我已經更新了片段 – Lucian

使用width每個元素

body { 
 
    margin: 0; 
 
} 
 

 
#navbar { 
 
    background-color: red; 
 
    height: 70px; 
 
    width: 80%; 
 
    margin: auto; 
 
} 
 

 
#search { 
 
    width: 100%; 
 
} 
 

 
#element1 { 
 
    width: 5%; 
 
    height: 100%; 
 
    float: left; 
 
    background-color: green; 
 
    display: table; 
 
} 
 

 
#element2 { 
 
    width: 95%; 
 
    height: 100%; 
 
    float: left; 
 
    background-color: yellow; 
 
    display: table; 
 
} 
 

 
.v_center { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    border-style: solid; 
 
    width: 100%; 
 
} 
 
.v_center #search{width:100%;}

<!DOCTYPE HTML> 
 
<HTML> 
 
<HEAD> 
 
    <link rel="stylesheet" href="style.css" /> 
 
</HEAD> 
 

 
<BODY> 
 
    <div id="navbar"> 
 
    <!--<img src="http://www.findwatchdeals.com/media/logo.png" width="100px" height="50px"/> 
 
\t \t <input type="search" id="search"/> --> 
 
    <div id="element1"> 
 
     <div class="v_center"> 
 
     test 
 
     </div> 
 
    </div> 
 
    <div id="element2"> 
 
     <div class="v_center"> 
 
     <input type="search" id="search" /> 
 
     </div> 
 
    </div> 
 
    <br style="clear:both;" /> 
 
    </div> 
 
</BODY> </HTML>

來源

2017-03-16 13:27:36

謝謝。我怎樣才能讓搜索欄成爲100％呢？ – float

我編輯了我的答案也是你的HTML無效 –

爲什麼從瀏覽器視圖的某個寬度＃element2從#navbar中刪除？ – float

HTML - 如何設置浮動元素的寬度爲其父文件夾的100％？

回答

相關問題