CSS / HTML：如何在不使用表的情况下实现像表这样的结构？

Question

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

我希望通过截图我可以通过使用表格来表示痛苦：

底部的两行在表格中定义为tr和td。结构非常完美，标签和文本字段的对齐非常完美。但是，如果我想仅围绕两行设置well类（例如<div class='well'> ... </div>），则表格方法将失败。只是因为您不允许在表格中添加任何div，这只是tr和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类现在在两行周围精美呈现，但是对齐现在变得一团糟。如何让它们仍然居中并让文本字段垂直对齐？

Answer 1

要使用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/

Answer 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。

Answer 3

我喜欢将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;
}

Answer 4

你也可以尝试这种方法

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

演示; fiddle