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

因此，很长一段时间以来我一直在围绕这种类型的对中。我正在尝试对齐中心的某个点，但与周围的元素有关系。为了使它更容易理解，请看一下以下代码笔：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 +最早的Opera

最佳答案

我认为这很容易
看到小提琴
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;
}

关于html - 没有表格或没有预定义的宽度，这种布局是否可能？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38452474/