选择框以填充剩余空间 [英] Select box to fill remaining space

问题描述

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

我在响应设计，所以当我调整页面大小然后当然与选择框的大小应该调整以及考虑到大小。

我可以设置一个百分比选择，但是随着它的上下移动，有时候我会产生很大的差距，或者按钮进入一个新的行。

  html 
 
< form class =form-horizo​​ntal> 
< div class =form-group> 
< label class =col-xs-3 control-labelfor =droplist>选择项目：< / label> 
< div class =col-xs-9> 
< select id =droplist> 
< option>值1< / option> 
< option>值2< / option> 
< / select> 
< button class =btn btn-primary>动作！< / button> 
< / div> 
< / div> 
< / form> 
 
 css 
选择{
 width：80％; 
} 
  

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

小提琴; http://jsfiddle.net/sJT6C/

解决方案

如果你坚持固定宽度的按钮，你可以使用高级CSS布局（flex或grid，现在在Firefox中进行实验），或者改变HTML标记并使用 float CSS属性进行操作，如下所示。 / b>

HTML：

 < form class =form-horizo​​ntal > 
< div class =form-group> 
< label class =col-xs-3 control-labelfor =droplist>选择项目：< / label> 
< div class =col-xs-9> 
< button class =btn btn-primary>动作！< / button> 
< div class =wrapper> 
< select id =droplist> 
< option>值1< / option> 
< option>值2< / option> 
< / select> 
< / div> 
< / div> 
< / div> 
< / form> 
  

CSS：

  .wrapper {
 margin-right：70px; 
 margin-top：.5ex; 
} 
选择{
 width：100％; 
} 
按钮{
 float：right; 
} 
  

JsFiddle

在标记中，我交换了选择和在 div 中用 按钮包装选择 包装。需要包装来获取 select 来占用尽可能多的空间，而不必指定其宽度。 （如果 width：100％没有包装器，则没有空间显示该按钮。）

样式表告诉选择以扩展到其父项的全部宽度，即 .wrapper 。包装器没有指定宽度，但作为块元素，它试图占用尽可能多的空间。现在，我们有一个 select ，它的行为就像一个行为良好的块元素。

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

是的，我忘了提及 margin-top：.5ex .wrapper 。原来选择和按钮用于使其基线对齐。我的破解破坏了这种对齐方式，这个差距对于解决这个问题是一个很差的尝试。垂直对齐在CSS中是一个复杂的事情，我没有发现足够的重要性来真正解决它。

On my form I am trying to have my select box take up the row except enough room to show the button on the same row.

I am after a responsive design, so as I resize the page then of course with size of the select box should resize as well to take into account that size.

I can set a percentage on the select, but as it goes up and down sometimes I end up with a large gap, or the button goes onto a new line.

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%;
}

Is there a way to have both the select and the button on the same line, and the select just resizes with the page?

fiddle; http://jsfiddle.net/sJT6C/

解决方案

If you insist on the button having fixed width, you can use advanced CSS layouts (flex or grid, now experimental in Firefox) or alter the HTML markup and play with float CSS property as follows.

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

In the markup, I swapped the select and the button and wrapped the select in a div with class wrapper. The wrapper is needed to get the select to take as much space as possible, without specifying its width. (If width: 100% is specified without a wrapper, there will be no room for the button.)

The stylesheet tells select to stretch to the full width of its parent, which is .wrapper. The wrapper has no width specified, but as a block element it tries to take as much space as possible. Now we have a select that behaves like a well-behaved block element.

Now the floating part. The wrapper is given right margin of the size of button width (including padding and border). It would be best to ensure that the button never exceeds this size, but I did not focus on that. The button is told to float to the right. Thus it fills the space reserved by wrapper’s right margin. (If I did not swap the elements in markup, the button would move down by the height of the wrapper.)

And yeah, I forgot to mention the margin-top: .5ex of .wrapper. Originally select and button used to have their baselines aligned. My hack breaks this alignment and this margin is quite a poor attempt to fix it. Vertical alignment is a darn complicated thing in CSS and I did not find it important enough to really solve it here.

这篇关于选择框以填充剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！