html - 在选择选项中对齐/间隔多个变量

Question

我有一个选择，我在每个选项中列出了这个人的姓名和他们的 Angular 色，例如:

John Smith            Teacher
Ronald MacDonald    Doctor
Jane Hope            Secretary
John Smith            Chef

如您所见，此人的姓名和他们的 Angular 色之间有足够的空间，使用户更容易选择正确的人。

但是，有没有一种方法可以使所有 Angular 色相互对齐？我尝试使用 Len(personName) 来获取一个人姓名中的字符数并将其从空格总数中扣除，但这里的问题显然是字母“i”和“m”仍然算作一个字符，尽管它们不同宽度，所以它仍然没有对齐。

如有任何帮助，我们将不胜感激。

Answer 1

您可以制作一个包含 2 列的下拉列表，如下所示:

#dropdown-menu {
    list-style:none;
}
#dropdown-menu ul.left-side {
    float:left;
    width:150px;
    list-style:none;
    vertical-align:top;
    display:inline=-block;
}
#dropdown-menu ul.right-side {
    float:left;
    width:70px;
    list-style:none;
    vertical-align:top;
    display:inline-block;
}

<ul id="dropdown-menu">
    <ul class="left-side">
        <li>Ronald MacDonald</li>
        <li>John Smith</li>
        <li>Ronnie Corbett</li>
        <li>Jane Austen</li>
    </ul>
    <ul class="right-side">
        <li>Teacher</li>
        <li>Doctor</li>
        <li>Comedian</li>
        <li>Chef</li>
    </ul>
</ul>