没有<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一样,请参考英国电信公司接受的答案,因为这是迄今为止最好的实现方法.这个功能.建议作为"可能重复"(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>

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

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

最酷的是,只要"顶部"div没有被设计display: table,那么在"对齐"方面可以忽略"其他东西"之类的其他东西.如果'top'div被设置为样式display: table,那么"Some text 1"将与"Something"对齐(即,它将所有子项视为表行,即使它们具有不同的显示样式).

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

例

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

这是一个例子