对齐在同一行上对齐文本，忽略左右的空间

Question

我的Web应用程序很简单：一个人以表单输入详细信息，当提交的方式出现时：

名称：kyle blah blah＆nbsp;＆nbsp;＆nbsp; first
名称：josh blah blah＆nbsp;＆nbsp; referral

我想要第一个和推荐完全对齐，我的问题是，如果有人只进入凯尔这个名字，那就变成了这样的：

名称：kyle＆nbsp;＆nbsp;＆nbsp; first
名称：josh blah blah＆nbsp;＆nbsp; referral

我不想发生这种情况 ^。

这是我的代码：

div.inline { 
  float:right;
}
.clearBoth { 
  clear:both; 
}

<div class="inline">Name:<u>WHATEVERCOMESFROMFORM</u><font style="margin-right: 250px">First</style></div>
<div class="inline">Name:<u>WHATEVERCOMESFROMFORM</u><font style="margin-right: 250px">Refferal</style></div>

有帮助吗？

Answer 1

您可以使用旧的好表标签

<table>
  <tr>
  <td>Name</td>
  <td><u>looooooooooooooong Word</u></td>
  <td><u>First</u></td>
  </tr>
    <tr>
  <td>Name</td>
  <td><u>tiny</u></td>
   <td><u>Referral</u></td>
  </tr>
</table>

我希望这就是您的意思

Answer 2

根据输出的布局，比较：

名称：Kyle Blah等等名字：Josh blah blah推荐

和

名称：凯尔名字：乔什·布拉·布拉（Josh Blah Blah）推荐

"名字"在"名称"的左侧和更近的地方出现。因此，我假设您正在为这三个标签中的每个标签寻找相等的宽度，以便它们垂直排列，因为可能有很多数据。

在这种情况下，您可以围绕"名称"，"名字"one_answers"转介"添加label或span标签。但是，您需要谨慎，因为如果某人键入一些长文本，它将包裹在下一行上。我会使用表。它们是为此目的而设计的 - 以有序的方式保存数据。桌子将自动调整为可用空间。

<style>
  td {
    padding-right: 60px;
  }
</style>
<table>
  <tr>
    <td>Name: Kyle blah blah</td>
    <td>First Name: Josh blah blah</td>
    <td>Referral</td>
  </tr>
  <tr>
    <td>Name: Kyle</td>
    <td>First Name: Josh blah blah</td>
    <td>Referral</td>
  </tr>
</table>

Answer 3

这是您的意思吗？

body {
  background: #111;
  text-align: center color: #999;
  color: #999;
}
.ztable {
  table-layout: fixed;
  overflow-x: scroll;
}
td,
th {
  padding: 15px
}

<div>
  <table>
    <tr>
      <th>Name:</th>
      <th>Really loooong name</th>
      <th>First</th>
    </tr>
    <tr>
      <th>Name:</th>
      <th>looong name</th>
      <th>referal</th>
    </tr>
    <tr>
      <th>Name:</th>
      <th>Short name</th>
      <th>First</th>
    </tr>
    <tr>
      <th>Name:</th>
      <th>Jack</th>
      <th>referal</th>
    </tr>
  </table>
</div>

Answer 4

尝试这样的东西。

div.inline>u {margin-right: 5px;margin-left: 5px;}

<div class="inline">
  Name:<u>WHATEVERCOMESFROMFORM</u><font style="margin-left: 5px;font-weight:bold;">First</font>
 </div>
 <div class="inline">
  Name:<u>Kyle</u><font style="margin-left: 5px;font-weight:bold;">Refferal</style>
</div>