填充父級內的剩余寬度，同時填充剩余寬度

Question

我有一個固定大小的導航欄（使用Bootstrap ），包含四個div。 這些div包含徽標，一些鏈接/下拉菜單和搜索框：

┌────────────────────────────navbar (fixed-size)──────────────────────────────┐
│┌───logo───┐┌───dropdown───┐┌───────────links──────────┐┌────search box─────┐│
││fixed-size││  fixed-size  ││      variable width      ││  fill remaining   ││
│└──────────┘└──────────────┘└──────────────────────────┘└───────────────────┘│
└─────────────────────────────────────────────────────────────────────────────┘

我想要搜索框（最右邊的框）填充容器中的剩余空間。 搜索框包含一個輸入和一個按鈕：

┌─────────────────────────────────┐
│┌─────────────────────┐┌────────┐│
││        <input>      ││<button>││
│└─────────────────────┘└────────┘│
└─────────────────────────────────┘

該按鈕具有固定的大小，但我希望輸入水平縮放，拉伸搜索框以填充其父級（導航欄）。

編輯：為了澄清，我希望搜索框占據其兄弟姐妹（徽標，下拉列表和鏈接）占用空間時留下的（水平）空間。 由於搜索框是由輸入和按鈕組成的，而按鈕的寬度是固定的，我希望輸入擴展並按下搜索框的邊界，直到搜索框填滿它在導航欄中留下的兄弟姐妹的空間

Answer 1

我就是這樣做的： http ： //jsfiddle.net/vU52q/

你有你的包裝和子元素：

<div class="search">
    <input type="text" />
    <button type="submit">Go</button>
</div>

然后將容器設置為position: relative; 和你的提交按鈕到position: absolute; 並為容器提供足夠的填充按鈕。

.search {
    box-sizing: border-box;
    background: #0f0;
    padding: 5px 100px 5px 5px;
    position: relative;
    width: 300px;
}
.search input {
    width: 100%;
}
.search button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 85px;
}

這樣，輸入始終是父元素的寬度減去固定寬度按鈕的寬度。

你也可以使用內聯對齊和css calc ，但這是我的首選方式。

如果你想使用calc，你可以檢查一下，它可能提供更多的選項來添加額外的固定大小元素： http ： //jsfiddle.net/ug7a9/

這會考慮每個部分並明確地將其添加到寬度計算中。

<div class="search">
    <button type="submit">Go</button><!--
    --><button type="submit">Go</button><!--
    --><input type="text" /><!--
    --><button type="submit">Go</button>
</div>

這些注釋用於防止.search元素之間的元素之間的空間（您也可以使用font-size：0）。

* {
    box-sizing: border-box;
}
.search {
    background: #0f0;
    position: relative;
    width: 300px;
}
.search input {
    display: inline-block;
    width: calc(100% - 50px - 50px - 50px);
}
.search button {
    display: inline-block;
    width: 50px;
}

你希望你的選擇器更明確一些（即不要做* ），但為了快速演示，我把它放進去了。

Answer 2

你可以使用calc函數但不是跨瀏覽器

calc(100% - element size);

http://jsfiddle.net/8CQHP/

您可以在caniuse.com上看到支持

Answer 3

我最終改變了我的代碼，並將評論中提供的解決方案中的想法用於他的答案。 我還使用了他絕對定位的按鈕技巧。 這就是我做的：

我在搜索框中使用了一個范圍，並將按鈕從搜索框中直接移到導航欄中：

<nav>
    ...

    <span>
        <input type="text" placeholder="Search...">
    </span>
    <button class="searchBtn" type="button"></button>
</nav>

使用這個css：

span {
    display: block;         /*This is the trick from*/
    overflow: hidden;       /*the solution Chad provided*/
}

input {
    width: 100%;
    padding-right: 65px;    /*This is to make room*/
}                           /*for the button*/

button {
    position: absolute;
    right: 0px;
    top: 0px;
}

overflow: hidden在跨度上使一切成為可能。 在這里閱讀： http ： //colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats