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 に答える