用Div替换HTML表

Question

好吧,我试图购买不应该使用html表的想法,而div应该是.但是,我经常使用类似于以下内容的代码

<table>
    <tr>
        <td>First Name:</td>
        <td colspan="2"><input  id="txtFirstName"/></td>
    </tr>
    <tr>
        <td>Last Name:</td>
        <td colspan="2"><input  type="text" id="txtLastName"/></td>
    </tr>
    <tr>
        <td>Address:</td>
        <td>
            <select type="text" id="ddlState">
                <option value="NY">NY</option>
                <option value="CA">CA</option>
            </select>
        </td>
        <td>
            <select type="text" id="ddlCountry">
                <option value="NY">USA</option>
                <option value="CA">CAN</option>
            </select>
        </td>
    </tr>
</table>

我希望标签对齐,我希望控件对齐.如果不使用表格,我该怎么做？

Answer 1

这应该做的伎俩.

<style>
div.block{
  overflow:hidden;
}
div.block label{
  width:160px;
  display:block;
  float:left;
  text-align:left;
}
div.block .input{
  margin-left:4px;
  float:left;
}
</style>

<div class="block">
  <label>First field</label>
  <input class="input" type="text" id="txtFirstName"/>
</div>
<div class="block">
  <label>Second field</label>
  <input class="input" type="text" id="txtLastName"/>
</div>

我希望你能得到这个概念.

Answer 2

请注意,虽然不鼓励表格作为页面布局的主要方式,但它们仍然有其自己的位置.表格可以并且应该在适当的时候使用,直到一些更流行的浏览器(ahem,IE,ahem)变得更符合标准,表格有时是解决方案的最佳途径.

Answer 3

我仔细查看了一个简单的解决方案,发现这个代码对我有用.right为了便于阅读,div是我留下的第三列.

这是HTML:

<div class="container">
  <div class="row">
    <div class="left">
      <p>PHONE & FAX:</p>
    </div>
    <div class="middle">
      <p>+43 99 554 28 53</p>
    </div>
    <div class="right"> </div>
  </div>
  <div class="row">
    <div class="left">
      <p>Cellphone Gert:</p>
    </div>
    <div class="middle">
      <p>+43 99 302 52 32</p>
    </div>
    <div class="right"> </div>
  </div>
  <div class="row">
    <div class="left">
      <p>Cellphone Petra:</p>
    </div>
    <div class="middle">
      <p>+43 99 739 38 84</p>
    </div>
    <div class="right"> </div>
  </div>
</div>

而CSS:

.container {
    display: table;
    }
.row  {
    display: table-row;
    }
.left, .right, .middle {
    display: table-cell;
    padding-right: 25px;
    }
.left p, .right p, .middle p {
    margin: 1px 1px;
   }