Question

我想知道是否有任何方法可以将选项文本的右侧对齐。

下面您可以看到我有一个选择，左边有一些名称，右边有“（垂直）”。我需要将“（垂直）”向右拉。有什么办法吗？

<select name="IM_COD_CONDOMINIO" id="IM_COD_CONDOMINIO" class="form-control ">
  <option value="add">Inserir novo</option>
  <option value="">Selecione</option>
  <option value="822">2000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="455">Abaete&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="456">Acapulco&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="457">Aconcagua&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="458">Acqua&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="459">Acqua Di Firenze&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="460">Acquamarine&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="461">Acre&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="462">Adalberto Lima&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="463">Adamatti&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="1833">Adriático&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="464">Agata&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="1106">Aguas Claras&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="1144">Agueda&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="465">Aimore&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="466">Alamo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="1864">Albatroz&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="1720">Alê&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
  <option value="467">Alexandre&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(vertical)</option>
</select>

更新：这个问题没有重复，因为我不是在尝试将完整的代码向右对齐，也不是添加一些样式来选择。我正在尝试将文本的一部分向左对齐，另一部分向右对齐。

Answer 1

一种技巧是使用不会折叠的无形空间并使font-family:monospace：

option {
  font-family:monospace;
}

<select name="IM_COD_CONDOMINIO" id="IM_COD_CONDOMINIO" class="form-control ">
  <option value="add">Inserir novo</option>
  <option value="">Selecione</option>
  <option value="822">2000               (vertical)</option>
  <option value="455">Abaete             (vertical)</option>
  <option value="456">Acapulco           (vertical)</option>
  <option value="456">Acapulcol          (vertical)</option>
  <option value="456">A                  (vertical)</option>
  <option value="456">BB                 (vertical)</option>
  <option value="456">CCC                (vertical)</option>
  <option value="456">very looooong word (vertical)</option>
</select>

Answer 2

不幸的是，没有。

option元素的风格是根据您所使用的平台进行的。看一下这个问题：How to style a select tag's option element?

一种解决方法是使用一个库，该库创建一个类似于select的元素并隐藏真实元素，以便您可以对其进行更多控制：

选择，部分文本右对齐

2 个答案: