使div占用所有剩余寬度

Question

我正在嘗試制作一個標題，其中包含一個漢堡菜單，一個搜索輸入和一個通知按鈕。 漢堡菜單位於左側，通知按鈕位於右側，搜索輸入位於中間。

 .general_button { border: none; background: none; font-size: 20px; padding: 0; margin: 0; } header { background: #2ec76e; padding: 5px; } header i { color: white; padding: 10px; } header #hamburger_menu { float: left; } header #notification_btn { float: right; } header #search_btn .general_button { padding-right: 0; } header #search_btn { width: 60%; margin: 0 auto; display: block; } header #search_btn input { font-size: 14pt; background: none; border: none; outline: none; padding: 5px 0px; color: white; } header #header-wrapper #search_btn input::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #92e6b6; } header #header-wrapper #search_btn input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #92e6b6; opacity: 1; } header #header-wrapper #search_btn input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #92e6b6; opacity: 1; } header #header-wrapper #search_btn input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #92e6b6; } header #search_btn hr { display: block; height: 1px; border: 0; border-top: 1px solid #92e6b6; margin: 0px auto; padding: 0; width: 100%; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <header> <div id="header-wrapper"> <div id="hamburger_menu" class="nav"> <button class="general_button"><i class="fa fa-bars" aria-hidden="true"></i> </button> </div> <div id="notification_btn"> <button class="general_button"><i class="fa fa-bell" aria-hidden="true"></i> </button> </div> <div id="search_btn"> <button class="general_button"><i class="fa fa-search" aria-hidden="true"></i> </button> <input type="text" placeholder="Search" /> <span class="clear_both"></span> <hr/> </div> <span class="clear_both"></span> </div> </header> 

代碼庫

菜單和通知按鈕僅占用寬度的一小部分。 對於search-btn div，我給出了60％的寬度。 但是我希望search-btn div占用所有剩余的寬度。 我怎樣才能做到這一點？

Answer 1

嘗試使用flexbox，移除所有浮點，將容器設置為#header-wrapper {display:flex;} ，並將中間列設置為#search_btn {flex:1;}以使其占用所有剩余空間。 如果您不想更新HTML，則可以通過添加#notification_btn {order:1;}重新排序。

我還建議也將flexbox用於按鈕的搜索輸入，使用底部邊框而不是使用<hr> 。 而且您不需要清除浮點數，因為它們都是flexbox。

 .general_button { border: none; background: none; font-size: 20px; padding: 0; margin: 0; } header { background: #2ec76e; padding: 5px; } header i { color: white; padding: 10px; } header #header-wrapper { display: flex; } header #hamburger_menu { /* float: left; */ } header #notification_btn { /* float: right; */ order: 1; } header #search_btn .general_button { padding-right: 0; } header #search_btn { /* width: 60%; */ /* margin: 0 auto; */ /* display: block; */ flex: 1; display: flex; border-bottom: 1px solid #92e6b6; } header #search_btn input { font-size: 14pt; background: none; border: none; outline: none; padding: 5px 0px; color: white; flex: 1; } header #header-wrapper #search_btn input::-webkit-input-placeholder { color: #92e6b6; } header #header-wrapper #search_btn input:-moz-placeholder { color: #92e6b6; opacity: 1; } header #header-wrapper #search_btn input:-ms-input-placeholder { color: #92e6b6; } /* header #search_btn hr { display: block; height: 1px; border: 0; border-top: 1px solid #92e6b6; margin: 0px auto; padding: 0; width: 100%; } */ 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> <header> <div id="header-wrapper"> <div id="hamburger_menu" class="nav"> <button class="general_button"><i class="fa fa-bars" aria-hidden="true"></i></button> </div> <div id="notification_btn"> <button class="general_button"><i class="fa fa-bell" aria-hidden="true"></i></button> </div> <div id="search_btn"> <button class="general_button"><i class="fa fa-search" aria-hidden="true"></i></button> <input type="text" placeholder="Search" /> <!-- <span class="clear_both"></span> --> <!-- <hr/> --> </div> <!-- <span class="clear_both"></span> --> </div> </header> 

jsFiddle

Answer 2

Calc可能會起作用：

寬度：calc（100％-80px）;

將80px替換為其他元素的寬度

https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

Answer 3

您知道通知和漢堡按鈕的寬度為40px，因此您只需使用CSS計算即可填充其余內容！

header #search_btn{
  width:calc(100% - 80px);
}

Answer 4

您應該能夠刪除寬度：60％； 並將“標頭#search_btn”設置為具有溢出：自動;。

header #search_btn {    
overflow:auto;
margin: 0 auto;
display: block;
}