选择下拉菜单文本如何左右分离？

Question

我可以把选项标签中的文本分开吗？

例如，正常样式：

<select>
    <option value="">First - A</option>
    <option value="">Car - B</option>
    <option value="">Black - C</option>
    <option value="">Super Duper - D</option>
</select>

我该如何让它看起来像这样：

？

<select>
    <option value="">First       - A</option>
    <option value="">Car         - B</option>
    <option value="">Black       - C</option>
    <option value="">Super Duper - D</option>
</select>

我尝试在选项标签中嵌套一个 span 标签，但没有成功。

- Phill Pafford

---

我认为这个问题的答案可能会有所帮助： https://dev59.com/OHVD5IYBdhLWcg3wTJvF - betafish

@betafish 谢谢，这也可以，但还不是我要找的。 - Phill Pafford

如何在 HTML 的 option 标签中实现两种不同的对齐方式？ - Misha Ts

Answer 1

在这些框中，最好使用非比例（等宽）字体，然后使用正确数量的不间断空格，就像这样：

<style>
    select{
        font-family:monospace;
    }
</style>
<select>
    <option value="">First&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- A</option>
    <option value="">Car&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- B</option>
    <option value="">Black&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;- C</option>
    <option value="">Super Duper&nbsp;- D</option>
</select>

- Jiří Herník

---

我尝试过这个，但是它并没有按照预期的那样工作，因为每个字母的大小不同，从而导致了错位的外观。 - Phill Pafford

重要的是将字体类型更改为等宽字体，如Courier和类似字体。如果您将我发送给您的整个示例复制到新的.html文件中并在浏览器中打开它，您应该会看到它已正确对齐。已尝试在Chrome和IE9中。 - Jiří Herník

Answer 2

<option> 标签不接受 HTML 内容。您只能使用空格填充以格式化选项。

或者，可以使用插件替代 <select>，这些插件使用 DIV 和 UL 替代了 <select>，使您拥有更多的灵活性。

- Diodeus - James MacFarlane

---

但是样式属性是可用的，只是不确定是否可以仅对文本的一半/部分进行样式设置。http://www.w3schools.com/tags/tag_option.asp - Phill Pafford

是的，你可以将CSS应用于元素，但不能将其应用于其部分。 - Diodeus - James MacFarlane