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

所以我已经在这种类型的定心上折腾了很长时间了。我试图对准中心的某个点，但与周围的元素有关。为了便于理解，请查看此代码笔：

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

HTML

使用表格布局或浮动会伤害我，但我想不出/找到其他可行的方法来实现这种效果。我也尝试过固定宽度，但我发现它更好，更流畅，可以实现不同的宽度

我不确定在这种情况下使用表的缺点是什么，因为我对它进行了跨浏览器测试，它们似乎都工作得很好（下面的链接）

-通用浏览器

-Interenet Explorers+可供选择的最古老歌剧

我认为这很容易 看到小提琴了吗

我想这很容易 看到小提琴了吗

---

您可以尝试使用

元素而不是表格。它基本上完成了同样的事情。不知道您为什么讨厌使用表，因为它们是统一显示所有元素的好方法。我个人认为，在您的情况下，使用

form

元素比使用table元素更有好处

---

您可以尝试使用

元素，而不是表格。它基本上完成了同样的事情。不知道您为什么讨厌使用表，因为它们是统一显示所有元素的好方法。我个人认为，在您的情况下，使用

form

元素比使用table元素更有好处

---

并将这些“给定名称：”等包装在标签标签中。如果您希望添加任何标签，请确保使用内联标签或提供内联属性，非常简单。真不敢相信我忽略了这一点。但是，我会想一想，看看我是否能找到为什么我会忽略这个方法。并将那些“给定名称：”等包装在标签标记中。如果您希望添加任何标记，请确保使用内联标记或给定内联属性，非常简单。真不敢相信我忽略了这一点。我会想一想，看看我是否能找到为什么我会忽略这个方法。这个表是用来显示数据的。它们不用于布局。表格用于显示数据。它们不用于布局。

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

table {
  width: 100%;
}

tr {
  width: 100%;
}

td {
  width: 50%;
}

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

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

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