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

Question

所以我一直在折腾这种居中很长一段时间。我试图对齐中心的某个点，但与它周围的元素有关系。为了使这一点更容易理解，请查看此代码笔:http://codepen.io/sparcut/pen/jAkkdv

这段代码基本上是一个简单的表格，其宽度设置为其父级的 100%，在本例中为主体。然后有两列，标签和输入分别右对齐和左对齐。 Blow 是一个快速示例:

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

使用表格布局或 float 让我很痛苦，但我想不出/找不到另一种可行的方法来实现这种效果。我也尝试过固定宽度，但我发现能够实现不同的宽度会更好、更流畅。

不确定在这种情况下使用表格有什么缺点，因为我通过跨浏览器测试进行了测试，它们似乎都可以正常工作(下面的链接)。

Cross-browser 1 - 通用浏览器

Cross-browser 2 - Internet Explorer + 最古老的 Opera Avalible

Answer 1

我觉得很简单看 fiddle https://jsfiddle.net/yxk09odg/

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

像这样的最小样式

div{
  text-align:center;

}
.inline-block{
  display:inline-block;
  text-align:right;
}