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

我全神贯注地寻找一个简单的解决方案，发现这个code对我有用。为了便于阅读，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;
   }

Answer 4

您可以创建简单的基于浮动的表单，而不必丢失您的液体布局。例如：

<style type="text/css">
    .row { clear: left; padding: 6px; }
    .row label { float: left; width: 10em; }
    .row .field { display: block; margin-left: 10em; }
    .row .field input, .row .field select {
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box;
    }
</style>

<div class="row">
    <label for="f-firstname">First name</label>
    <span class="field"><input name="firstname" id="f-firstname" value="Bob" /></span>
</div>
<div class="row">
    <label for="f-state">State</label>
    <span class="field"><select name="state" id="f-state">
        <option value="NY">NY</option>
    </select></span>
</div>

但是，如果您有复杂的表单布局，其中存在多个固定且灵活宽度列的网格，则确实会出现故障。那时你必须决定是否坚持使用div并放弃液体布局，而只是将所有内容放入固定的像素位置，或者让表格进行操作。

就我个人而言，液体布局是一个比用于布置表格的确切元素更重要的可用性功能，因此我通常会选择表格。

Answer 5

基本上它归结为使用固定宽度的页面并设置这些标签和控件的宽度。这是实现无表格布局的最常用方式。

有很多方法可以设置宽度。 Blueprint.css是一个非常流行的css框架，可以帮助您设置列/宽度。

Answer 6

有一个非常有用的在线工具，只需自动将表转换为div：

http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/

解释它的视频：https://www.youtube.com/watch?v=R1ArAee6wEQ

我每天都在使用它。我希望它有所帮助;）

用Div替换HTML表

6 个答案: