1

我在 stackoverflow 上发现了一些类似的问题，但似乎没有一个为我的案例提供真正明确的解决方案。

我希望通过屏幕截图可以显示使用表格的痛苦：

在此处输入图像描述

底部的两行被定义为一个表tr并且td在一个表内。结构完美，标签和文本字段的对齐完美。但是，如果我只想围绕两行设置一个well类（例如<div class='well'> ... </div>），那么表格方法将失败。仅仅因为您不允许div在表格内有任何东西，这只是例外trand td。

所以我从表中取出前两行并将其作为纯 div。您可以在灰色井中看到上面的前两行结果。

<div class='well'>
  <div>
    <div class='block_inline'> ... </div>
    <div class='block_inline'> ... </div>
  </div> 
  <div>
    <div class='block_inline'> ... </div>
    <div class='block_inline'> ... </div>
  </div>
</div>

类本身well现在围绕两行漂亮地呈现，但是现在对齐是一团糟。如何使它们仍然居中并使文本字段彼此垂直对齐？

4

4 回答 4

3

要使用 div 获得这种效果，只需使用带有 table、table-row 和 table-cell 的 display 属性：

HTML：

<div class='well'>
  <div class="row">
    <div class='block_inline'> Title </div>
    <div class='block_inline'> ... </div>
  </div> 
  <div class="row">
    <div class='block_inline'> Due Date Time </div>
    <div class='block_inline'> ... </div>
  </div>
</div>​

CSS：

div
{
    border: 1px solid #333;
}

.well
{
    display: table;
    width: 70%;
}

.row
{
    display: table-row;
}

.block_inline
{
    display: table-cell;
    width: 50%;
}

这模仿了表格的行为，但使标记保持美观和语义。这对于解决“剩余空间列”问题也很有用:)

http://jsfiddle.net/Kyle_Sevenoaks/e7VeU/

于 2012-11-20T13:13:34.440 回答
2

我喜欢使用 UL 进行表单布局：http: //jsfiddle.net/BKgB9/

<form>
 <div>
    <ul>
        <li><label>Type:</label><input type="text" /></li>
        <li><label>Reminder:</label><input type="text" /></li>
    </ul>
 </div>
</form>

div {
 background:#dcdcdc;
 border:1px solid #999;
 padding:20px;
 display:inline-block;
}

div ul li {
 margin-bottom:10px;
}

div ul li label {
 float:left;
 width:85px;
}
于 2012-11-20T13:20:07.940 回答
2

好吧，首先语义是一团糟..这就是我的做法：

<form>
    <div class="row">
        <label for="input_1">Title</label>
        <input type="text" name="input_1" id="input_1">
    </div>
    <div class="row">
        <label for="input_2">Due date time*</label>
        <input type="text" name="input_2" id="input_2">
    </div>

</form>

风格：

div.row {
    clear: both;
}

label {
    display: inline-block;
    width: 300px;
}

input {
    display: inline-block;
}

必要时进行调整。

的使用div class="row"可以被字段集和定义列表代替。看看http://www.gethifi.com/blog/html-forms-the-right-ways。

于 2012-11-20T13:08:57.760 回答
0

你也可以试试这个方法

<div class="first">
<div class="line1">
   <label>One</label>
   <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
    </div>
    <div class="line2">
    <label>two</label>
   <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
</div>
<div>

演示；小提琴

于 2012-11-20T13:17:30.070 回答