Question

在我的表单上，我试图让我的选择框占据行，除了足够的空间以显示同一行上的按钮。

我正在使用响应式设计，因此当我调整页面大小时，当然选择框的大小也应调整大小以考虑该大小。

我可以在选择中设置一个百分比，但是当它上下有时我最终会有一个很大的间隙，或者按钮会转到一个新的行。

html

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label" for="droplist">Select item:</label>
        <div class="col-xs-9">
            <select id="droplist">
                <option>Value 1</option>
                <option>Value 2</option>
            </select>
            <button class="btn btn-primary">Action!</button>
        </div>
    </div>
</form>

css
select {
    width: 80%;
}

有没有办法在同一行上同时选择和按钮，而select只是随页面调整大小？

拨弄; http://jsfiddle.net/sJT6C/

Answer 1

如果您坚持使用具有固定宽度的按钮，则可以使用高级CSS布局（flex或grid，now experimental in Firefox）或更改HTML标记并使用float CSS属性，如下所示。

HTML：

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label" for="droplist">Select item:</label>
        <div class="col-xs-9">
            <button class="btn btn-primary">Action!</button>
            <div class="wrapper">
            <select id="droplist">
                <option>Value 1</option>
                <option>Value 2</option>
            </select>
            </div>
        </div>
    </div>
</form>

CSS：

.wrapper {
    margin-right: 70px;
    margin-top: .5ex;
}
select {
    width: 100%;
}
button {
    float: right;
}

JsFiddle

在标记中，我交换了select和button并将select包裹在div的{{1}}类中。需要包装器才能使wrapper占用尽可能多的空间，而不指定其宽度。（如果在没有包装器的情况下指定select，则按钮将没有空间。）

样式表告诉width: 100%拉伸到其父级的全宽，即select。包装器没有指定宽度，但作为块元素，它尝试占用尽可能多的空间。现在我们有一个.wrapper，其行为就像一个表现良好的块元素。

现在浮动部分。包装器的右边距为select宽度（包括填充和边框）。 最好确保按钮永远不会超过这个尺寸，但我没有专注于那个。 button被告知要向右浮动。因此它填充了包装器右边距保留的空间。（如果我没有在标记中交换元素，按钮会向下移动包装器的高度。）

是的，我忘了提及button的{{1}}。最初margin-top: .5ex和.wrapper过去基线对齐。我的黑客打破了这种对齐，这个边缘是一个很难修复它的尝试。垂直对齐在CSS中是一件非常复杂的事情，我觉得在这里解决它并不重要。

Answer 2

要添加到Palec's answer，如果按钮（或按钮）的宽度可变，则margin-right将不是一个合适的解决方案。而是使用overflow属性替换：

CSS：

.wrapper {
    overflow: hidden;
    margin-top: .5ex;
}
select {
    width: 100%;
}
button {
    float: right;
}

（HTML与原始答案相同）

JsFiddle

将按钮元素放在选择框之前是很重要的。它不会相反（虽然我无法确定原因）。

注意：此解决方案（如Palec＆＃39;）将导致元素的标签索引被反转：按钮将首先标签，然后是选择框。

选择框以填充剩余空间

2 个答案: