填充父元素剩余宽度的剩余宽度

Question

我有一个固定大小的导航栏（使用Bootstrap），其中包含四个div。这些div包含一个标志，一些链接/下拉框和一个搜索框：

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

我希望搜索框（在最右侧的框）可以填充容器中剩余的空间。搜索框包括一个输入框和一个按钮：

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

按钮有一个固定的大小，但我希望输入框在水平方向上进行缩放，将搜索框伸展到填充其父元素（导航栏）的大小。

编辑：为了澄清，我希望搜索框占据剩余的（水平）空间，即当它的兄弟元素（标志、下拉菜单和链接）占据它们的空间时。由于搜索框由一个输入和一个按钮组成，而按钮将具有固定的宽度，因此我希望输入框扩展并推动搜索框的边界，直到搜索框填充其兄弟元素在导航栏中留下的空间为止。

- jbb

---

你尝试过将宽度设置为100%吗？ - Brandon Kiefer

这会破坏浮动元素，因为它会告诉搜索框占用导航栏100%的宽度。 - Michael

这个例子可能会对你有所帮助：http://bootply.com/128162 - Carol Skelly

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>

这些注释的作用是为了防止元素之间出现空白（你也可以使用font-size：0来达到同样的效果），作用于.search元素。

* {
    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;
}

您应该更明确地使用选择器（即不要使用*），但出于快速演示目的，我将其放在了这里。

- Chad

---

抱歉，也许我的问题没有表达清楚。您正在将.search的宽度设置为300px。我希望当.search的兄弟元素（logo、dropdown和links）占据了它们所需的（水平）空间后，.search（以及输入框）的宽度是剩余的空间。 - jbb

所以你想让它们全部动态的？你看过这个吗：https://dev59.com/IGw05IYBdhLWcg3w72M0? - Chad

Answer 2

你可以使用calc函数，但它不是跨浏览器的。

calc(100% - element size);

http://jsfiddle.net/8CQHP/

您可以在caniuse.com上查看支持情况。

- Jose Vega

Answer 3

我最终改变了我的代码，并使用Chad在评论中提供的解决方案的想法。我还使用了他的绝对定位按钮技巧。这是我所做的：

我为搜索框使用了一个span，并将按钮从搜索框中移出，直接放入导航栏中：

<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 在 span 上的应用使得这一切成为可能。在这里阅读更多相关内容：http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

- jbb