Html 在“选择”选项中向左对齐一个单词，向右对齐一个单词

我通过合并两个单词在c代码的Select选项中填充数据。现在我想要一个单词左对齐，另一个单词右对齐。怎么做

我希望输出如下所示：

MD1        LAPTOP
MD2        MOUSE
MD311      KEY-BOARD
MD45       HARD DISK

或

---

注意：我需要列表选择选项，只是因为通过单击该项，我想显示所选选项项的详细信息。

您可以将每个单词放入一个容器中，无论它是div还是西班牙语，并在其中放入一些类以使用CSS处理它们。最简单的方法是为左跨距指定一个前缀宽度。例如：

HTML:
<span class="left">MD1</span><span class="right">LAPTOP</span><br/>
<span class="left">MD2</span><span class="right">LAPTOP</span><br/>
<span class="left">MD3</span><span class="right">LAPTOP</span><br/>
<span class="left">MD4</span><span class="right">LAPTOP</span><br/>
<span class="left">MD5</span><span class="right">LAPTOP</span><br/>

CSS:
.left{
     display:inline-block;
     width: 100px;
}

工作小提琴：

还可以使用容器div上的display:table和display:table row和display:table cell为每一行和单元格设置单元格之间的空间，这将使布局更灵活，但更复杂

---

或者，由于它是表格数据，只需使用表格即可。

只需在选项值之间使用所需的空间，如

<select>
    <option>MD1 &nbsp;&nbsp; LAPTOP</option>
    <option>MD2 &nbsp;&nbsp; MOUSE</option>
    <option>MD3 &nbsp;&nbsp; KEY-BOARD</option>
    <option>MD4 &nbsp;&nbsp; HARD DISK</option>
</select>

请参阅：

也许您可以尝试单词间距：

---

示例：

从所需的输出来看，似乎您只需要在两个单词之间放置相等的空格，因为第二个单词是选项卡式的，没有正确对齐。@Tanner，我知道这个技巧，但我想通过对齐进行分岔。我认为在select中不可能做到这一点。从技术上讲，您仍然可以创建自己的“下拉”功能，它允许您执行任何您想要的格式。这可能不是最好的解决方案。但是，由于option元素内部不能有标记，因此可能需要使用HTML实体：可以通过在两个文本之间添加一些空格来实现，如@nkmol。或者您可以通过div创建它。创建类似listbox的设计。Onclick show/hide这个div。我需要使用SELECT选项，因为通过在单个选项项上选择，将显示其相关的详细信息。那么这是不可能的。选项中不能包含HTML并正确设置样式。您需要将一些ul>li*n修改成一个选择样式，并使用jQuery处理单击，或者使用HTML实体，正如@nkmol@DKS所指出的，通过添加容器并在其上应用类可以实现同样的效果，因为这是最简单的工作。但是MD55怎么办？我认为这是解决方案。现在，您可能不满意“硬盘彼此相距如此之远”这个词。你可以简单地绕过tge的“字间距”和“假”空间实体&8201;. 您可能只想显示选项元素的额外信息。看看@DKS，其中有一个3位数的数字，您想添加一个新的旁路。然而，我建议你寻找一个更好的受支持的解决方案，因为这实际上是不受支持的。不幸的是，除非你通过Javascript来操作文本，否则你不会找到一个完美的解决方案。

<select>
    <option>MD1 &nbsp;&nbsp; LAPTOP</option>
    <option>MD2 &nbsp;&nbsp; MOUSE</option>
    <option>MD3 &nbsp;&nbsp; KEY-BOARD</option>
    <option>MD4 &nbsp;&nbsp; HARD DISK</option>
</select>

<select name="mySelect">
    <option value="1">MD1 LAPTOP</option>
    <option value="2">MD2 MOUSE</option>
    <option value="3">MD3 KEY-BOARD</option>
    <option value="4">MD4 HARD DISK</option>
</select>

...

select, option {
    word-spacing:20px;
}