如果没有 <table>，这样的对齐是否可以实现？答案

【问题标题】：Is such alignment achievable without <table>?如果没有 <table>，这样的对齐是否可以实现？
【发布时间】：2012-06-16 19:20:00
【问题描述】：

我的目标是对齐，如附图所示（左侧的字段可以有任何宽度，但右侧的字段应该从相同的X 坐标开始）。

现在我正在使用一个简单的表格代码来实现这一点：

<table><tr>
<td>Left1</td><td>Right 1</td></tr>
<tr><td>Left 2</td><td>Right 2</td></tr></table>

但是，我听说使用表格通常很糟糕。有没有办法可以使用 CSS 实现相同的设计？该网站是为可能不支持花哨 CSS 的移动设备设计的，因此代码必须尽可能简单。

编辑：因为我仍然偶尔会从那些（大概）刚开始使用 HTML 的人那里收到关于这个问题的通知，就像我做它时一样，请参考 BT 接受的答案因为这是迄今为止实现此功能的最佳方式。建议为“可能重复”的问题（2016 年 5 月 31 日）目前不提供基于 CSS 的 table-row/table-column 方法，需要您进行猜测。

【问题讨论】：

一张桌子有什么问题？这就是他们的目的。其他任何事情都可能比使用表格更复杂。
正如我所说，我读过的所有设计文章都不鼓励使用表格，因此提出了这个问题。
我同意桌子不是去这里的最佳方式。是的，表格可以完成工作，但它们在语义上并不正确，因为您没有创建表格。使用 CSS 实现同样的功能非常简单（见我的回答）
使用表格进行布局并不是好的设计实践。将表格用于表格数据，这是它的用途。
Forms - Can they be done without tables?的可能重复

标签： html css optimization html-table

【解决方案1】：

我偶然发现了一个更简单的方法来做到这一点。假设您有以下内容：

<div class='top'>
  <div>Something else</div>
  <div class='a'>
    <div>Some text 1</div>
    <div>Some text 2</div>
  </div>
  <div class='a'>
    <div>Some text 3</div>
    <div>Some text 4</div>
  </div>
</div>

您可以像这样使用 css 表格显示样式对齐 Some text 1 和 Some text 2：

.a {
  display: table-row;
}
.a div {
  display: table-cell;
}

最酷的是，只要'top' div 的样式不是display: table，那么就对齐而言，可以忽略“Something else”之类的其他内容。如果'top' div 的样式为display: table，那么“Some text 1”将与“Something else”对齐（即，它将所有子元素视为表格行，即使它们具有不同的显示样式）。

这在 Chrome 中有效，不确定它是否应该以这种方式运行，但我很高兴它有效。

  .a {
      display: table-row;
    }
    .a div {
      display: table-cell;
    }

   <div class='top'>
      <div>Something else</div>
      <div class='a'>
        <div>Some text 1</div>
        <div>Some text 2</div>
      </div>
      <div class='a'>
        <div>Some text 3</div>
        <div>Some text 4</div>
      </div>
    </div>

【讨论】：

比上述解决方案更加健壮和可维护的解决方案，因为它不需要猜测宽度。
这是我见过的第一个避免指定宽度并且表现得像表格的解决方案。完美！
我需要这个，因为我想将搜索结果提取到它自己的组件中，但不希望它的顶级标签是<tr>。这是一个完美的解决方案！谢谢

【解决方案2】：

虽然可以使用表格来实现相同的效果，但将表格用于布局的目的在语义上会被认为是不正确的。尤其是因为您只需使用一两行 CSS 就可以实现同样的效果。

给你的标签一个固定的宽度（比你最长的标签文本大）。

<style>
label {
    width: 100px;
    display: inline-block;
}
</style>

<label>Name</label>
<input type="text" />
<br/>
<label>Email Address</label>
<input type="text" />

Example

【讨论】：

如果省略 display:inline-block 会发生什么？（估计IE7不支持）
浏览器也会忽略宽度，因为宽度只能应用于块级元素。

【解决方案3】：

在这里，您可以使用它来获取所需的输出。

使用 IMO 表格并不是一个坏习惯，事实上它们应该用于需要表格数据或数据格式类似于表格的地方。

但是，不鼓励使用表格来设计整页或不以表格格式显示的任何内容，这实际上是非常非常错误的。下面是一个使用非表结构的示例：

HTML：

<form>
    <label for="name">Email: </label><input id="name" type="email" placeholder="@" />
    <br/><br />
    <label>Password: </label><input type="password" id="password"  placeholder="*"/>
</form>

CSS：

label {
    width: 80px;
    display: block;
    vertical-align: middle;
    float:left;
    clear:left;
}
input {
    border-top-left-radius:5px;
    border-bottom-right-radius: 10px;
    background: #141414;
    color: #fdd56c;
    outline: none;
}

这是example

【讨论】：

在上面的例子中使用 display:inline-block 和 css IE7 Hack 作为*display:inline 可以避免使用浮点数。更新了清除浮动的答案
这样使用br是错误的想法stackoverflow.com/questions/3937515/…

【解决方案4】：

是的，这样的对齐是可能的。使用 CSS 类，您可以标记 HTML 以实现与表格相同的外观，而无需为使用表格而头疼（或使标记看起来难看）。

使用这个 CSS：

.label {
    display: inline-block;
    width: 100px;
}

.inputBox {
    width: 200px;
}

还有这个 HTML：

<span class="label">E-mail:</span><input type="email"></input><br>
<span class="label">Password:</span><input type="text"></input>

你会得到你想要的布局。

要在支持 IE7 的情况下执行此操作，请将上面的 CSS 更改为：

.label {
    display: block;
    width: 100px;
    float: left;
    clear: left;
}

然后，在已显示的行下方添加此行：

<div style="clear: left"></div>

使用 IE7 兼容设置的示例：http://jsfiddle.net/bbXXp/

【讨论】：

【解决方案5】：

没错。我正在艰难地学习它。我使用表格进行对齐，现在，某些对齐在较小的屏幕（例如手机、平板电脑等）中变得很奇怪。因此，我切换到 div。最好使用<div style="display:inline-block">...</div>，如果屏幕更小会自动对齐。因此，我的建议是 Table 应该只用于真正的表格，而不是用于对齐正文中的控件。

【讨论】：