Question

所以我现在已经在这种类型的定心中徘徊了很长时间。我试图与中心的某个点对齐，但与周围的元素有关。为了更容易理解，请查看此代码集：http://codepen.io/sparcut/pen/jAkkdv

此代码基本上是一个简单的表，其宽度设置为其父级的100％，在本例中为正文。然后有两列，标签和输入分别左右对齐。打击是一个快速的样本：

HTML

<table>
<tr>
    <td>Given Name:</td>
    <td><input type="text"></td>
</tr>
<tr>
    <td>Surname:</td>
    <td><input type="text"></td>
</tr>
<tr>
    <td>Street Address:</td>
    <td><input type="text"></td>
</tr>
<tr>
    <td>City:</td>
    <td><input type="text"></td>
</tr>
<tr>
    <td>Phone:</td>
    <td><input type="text"></td>
</tr>

CSS（编译的Sass）

table {
  width: 100%;
}

tr {
  width: 100%;
}

td {
  width: 50%;
}

td:first-child {
  text-align: right;
}

td:last-child {
  text-align: left;
}

使用表格布局或浮动会让我受伤，但我无法想到/找到另一种可行的方法来实现这种效果。我也尝试过固定宽度，但我发现它更好，更流畅，能够达到不同的宽度。

不确定在这种情况下使用表格的缺点是什么，因为我通过跨浏览器测试，它们似乎都工作正常（链接下面）。

Cross-browser 1 - 通用浏览器

Cross-browser 2 - Interenet Explorers + Oldest Opera Avalible

Answer 1

我觉得这很容易看到小提琴 https://jsfiddle.net/yxk09odg/

msgrcv

使用这样的最小样式

<div>
  <div class="inline-block">
    Given Name:<input type="text"><br>
Surname:<input type="text"><br>
Street Address:<input type="text"><br>
City:<input type="text"><br>
Phone:<input type="text">
  </div>
</div>

Answer 2

您可以尝试使用<form>元素代替表格。它基本上完成了同样的事情。不确定你讨厌使用表格的原因，因为它们是统一显示所有元素的好方法。对于您的情况，我个人没有看到在表元素上使用form元素带来的任何额外好处。

HTML form element

没有表格或预定义的宽度，这种布局是否可行？

2 个答案: