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

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

我在搜索框中使用了一个范围，并将搜索框中的按钮直接移到了导航栏中：

<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

填充父级内的剩余宽度，同时填充剩余宽度

3 个答案: