Question

这就是我的HTML的样子：

<select>
  <option>Long name <span>P1</span></option>
  <option>Peter <span>P2</span></option>
  <option>Hugo <span>K4</span></option>
</select>

我想显示如下选择选项：

Longname             P1
Petr                 P2
Hugo                 K4

代码（P1，P2，P4）与选择的右侧对齐，条件 - 我不知道最长名称的长度，我宁愿不为文本的任何部分设置准确的宽度

Answer 1

选项元素不能包含任何子元素..所以你正在做的事情不会起作用。如果您想要更多功能，我建议您使用https://select2.github.io/替换您的选择框。

Answer 2

http://jsfiddle.net/Tobsta/Lpb092gd/2/

CSS样式<ul>，其函数将所选值发送到display: none; <select>

Answer 3

从技术上讲，您可以使用html实体 -   - 不间断的空间^msdn，wiki。这是非常非常错误的 - 首先每个选项元素必须具有相同数量的字符，并且只有在字体是等宽的^wiki时它才能正常工作。

因此，是，您必须使用自定义选择框。有很多，只需要一点点搜索。

这个jsfiddle.net/ha4p1440正在使用chrome，但在其他浏览器中未对齐。

<select>
   <option>Long name P1</option>
   <option>Peter&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;P2</option>
   <option>Hugo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;K4</option>
</select>

在这里，jsfiddle.net/ha4p1440/1，字体设置为'Courier'，在每个浏览器中看起来都一样（我在IE9中尝试过）。

select {
    font-family: 'Courier',serif;
}

Answer 4

可能不是确切的解决方案，但可能是：如果您使用引导程序，则可以在选项中添加工具提示。

<select>
  <option title="P1" data-toggle="tooltip" data-placement="bottom">Long name</option>
</select>

Answer 5

<select>
  <option>
    <span style="float: left">Long name </span>
    <span style="float: right">P1</span>
  </option>
</select>

CSS将选定文本的一部分对齐到右侧

5 个答案: