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

Answer 1

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

或者，<select>的插件替换使用DIV和UL而不是<select>来提供更多灵活性。

Answer 2

更容易使用非比例（等宽）字体用于那些框，然后使用正确数量的不间断空格，如下所示：

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

选择左下方分割的下拉菜单文本？

2 个答案: