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

codepen.io

菜单和通知按钮只占了一小部分宽度。对于 search-btn div，我设置了 60% 的宽度。但是我希望 search-btn div 占用所有剩余的宽度。我该怎么做？

Answer 1

尝试使用 flexbox，移除所有 float ，将容器设置为 #header-wrapper {display:flex;}并将中间列设置为 #search_btn {flex:1;}让它占据所有剩余的空间。您可以通过添加 #notification_btn {order:1;} 重新订购商品, 如果您不想更新 HTML。

我还建议在按钮的搜索输入中也使用 flexbox，使用底部边框而不是使用 <hr> .而且你不需要清除 float ，因为它都是 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