CSS 填充剩余宽度

Question

我有这个标题栏。

<div id="header">
        <div class="container">
            <img src="img/logo.png"/>
            <div id="searchBar">
                <input type="text" />
            </div>
            <div class="buttonsHolder">
                <div class="button orange inline" id="myAccount">
                    My Account
                </div>
                <div class="button red inline" id="basket">
                    Basket (2)
                </div>
            </div>

        </div>
    </div>

我需要 searchBar 来填充 div 中剩余的空白。我该怎么做？

这是我的 CSS

#header { 
    background-color: #323C3E;
    width:100%;
}

.button {
    padding:22px;
}


.orange {
    background-color: #FF5A0B;
}

.red {
    background-color: #FF0000;
}

.inline { 
    display:inline;
}

#searchBar {
    background-color: #FFF2BC;
}

Answer 1

使用calc!

https://jsbin.com/wehixalome/edit?html,css,output

HTML:

<div class="left">
  100 px wide!
  </div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right">
    Fills width!
  </div>

CSS:

.left {
  display: inline-block;
  width: 100px;

  background: red;
  color: white;
}
.right {
  display: inline-block;
  width: calc(100% - 100px);

  background: blue;
  color: white;
}

更新:作为 div 之间没有空格的替代方法，您可以在外部元素上设置 font-size: 0。