当select是最后一项在线时，Floated Divs没有正确包装

Question

我是包含文本框或选择元素的浮动div。我希望div在空间不足时换行到下一行。当行的最后一个元素是文本框时，这可以正常工作，但当它是一个选择时则不行。您可以调整浏览器的大小以查看结果。

示例html：

<div style="display:block;float:left;padding-right:5px;vertical-align:bottom;padding-bottom:2px;">
  <span>Text1</span>
  <br>
  <input id="TextBox" type="text" tabindex="-1" size="3" value="1">
</div>    

JS小提琴：http://jsfiddle.net/NsxJM/

Answer 1

如果您愿意接受建议，可以使用display：inline属性。

FIDDLE

E.g。 HTML

<div class="wrapper">
  <label for="one">Text</label><br/>
  <input id="one" type="text" value="1" />
</div>

<div class="wrapper">
  <label for="tow">Text</label><br/>
  <input id="two" type="text" value="2" />
</div>
<div class="wrapper">
  <label for="three">Text</label><br/>
  <input id="three" type="text" value="3" />
</div>

<div class="wrapper">
  <label for="four">Text</label><br/>
  <input id="four" type="text" value="4" />
</div>

<div class="wrapper">
  <label for="five">Text</label><br/>
  <input id="five" type="text" value="5" />
</div>

<div class="wrapper">
  <label for="sel">*Select</label><br/>
  <select id="sel">
    <option>--Select--</option>
    <option>1</option>
    <option>2</option>
  </select>
</div>

<div class="wrapper">
  <label for="six">Text</label><br/>
  <input id="six" type="text" value="6" />
</div>

<div class="wrapper">
  <label for="seven">Text</label><br/>
  <input id="seven" type="text" value="7" />
</div>

E.g。 CSS

.wrapper{
  display: inline-block;
  *display: inline;
  zoom: 1;
}

  input[type='text']{
  width: 50px;
}

Answer 2

问题在于包含div

的<select>的高度

所有带文本框的div的高度为46px，而带有选择列表的div的高度为44px。如果您将其内联指定为46px高度，则问题将得到解决。

见工作fiddle