0

我是包含文本框或选择元素的浮动 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/

预期行为

意外行为

4

2 回答 2

1

如果您愿意接受建议，您可以使用 display: inline 属性来做到这一点。

小提琴

例如 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>

例如 CSS

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

  input[type='text']{
  width: 50px;
}
于 2013-08-06T15:11:55.363 回答
0

div问题在于包含的高度<select>

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

见工作小提琴

于 2013-08-06T15:05:34.377 回答