Question

我正在尝试制作一个标题，它有一个汉堡包菜单，一个搜索输入和一个通知按钮。汉堡包菜单位于左侧，通知按钮位于右侧，搜索输入位于中间位置。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

codepen.io

菜单和通知按钮只占宽度的一小部分。对于search-btn div，我的宽度为60％。但是我希望search-btn div占用剩下的所有宽度。我怎么能这样做？

Answer 1

尝试使用flexbox，删除所有浮动，将容器设置为POSIXct并将中间列设置为p <- ggplot(data = dataset) p <- p + layer(mapping=aes(x=created, y=LastTradePriceOnly, color= Symbol), geom="point", stat="identity", position="identity")limit_down <- as.POSIXct(Sys.time()-input$timeslider*60) attributes(limit_down)$tzone <- input$timezone limit_up <- as.POSIXct(Sys.time()) attributes(limit_up)$tzone <- input$timezone p <- p + scale_x_datetime(breaks = date_breaks("200 sec"), labels = date_format("%H:%M:%S"), limits=c(min(dataset$created-1800), max(dataset$created))) + theme(axis.text.x = element_text(angle = 90), panel.grid.major=element_blank(), panel.grid.minor=element_blank(), panel.background = element_blank()) + coord_cartesian() p，以使其占用剩余的所有空间。如果您不想更新HTML，可以通过添加#header-wrapper {display:flex;}对商品进行重新排序。

我还建议使用flexbox进行搜索输入按钮，使用底部边框而不是#search_btn {flex:1;}。而且你不需要清除浮子，因为它都是flexbox。

＆＃13;

#notification_btn {order:1;}

＆＃13;

<hr>

＆＃13;

<强> jsFiddle

Answer 2

Calc可能会起作用：

宽度：计算（100％ - 80px）;

将80px替换为其他元素的宽度

https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 3

您知道您的通知和汉堡包按钮宽度为40px，因此您可以使用CSS计算来填写其余内容！

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

Answer 4

你应该可以删除你的宽度：60％;并设置＆＃34;标题#search_btn＆＃34;有溢出：auto;。

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

使div占用剩余的所有宽度

4 个答案: