如果没有？<table> </table>，这种对齐是否可以实现

Question

我的目标是对齐，如附图所示（左侧的字段可以有任何宽度，但右侧的字段应该从相同的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的表格行/表格列方法，并且需要您进行猜测工作。

Answer 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，那么在对齐方面可以忽略其他类似“其他东西”的东西。如果'top'div的样式为display: table，那么“Some text 1”将与“Something”对齐（即它将所有子项视为表行，即使它们具有不同的显示样式）。 / p>

这适用于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>

Answer 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

Answer 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

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

Answer 5

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