12

想要的结果

我的目标是对齐，如附图所示（左侧的字段可以有任何宽度，但右侧的字段应该从相同的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 就可以实现相同的效果。

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

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

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

例子

4

5 回答 5

12

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

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

最酷的是，只要 'top' div 没有设置样式display: table，那么在对齐方面可以忽略其他内容，例如“Something else”。如果'top' div IS styled 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>

于 2015-07-17T01:03:15.713 回答
5

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

使用表格 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;
}

这是一个例子

于 2012-06-13T19:18:18.830 回答
5

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

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

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

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

例子

于 2012-06-13T19:02:38.957 回答
3

是的，这样的对齐是可能的。使用 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/

于 2012-06-13T19:03:09.530 回答
0

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

于 2016-10-21T06:53:05.083 回答