选择右侧部分文本对齐

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：

\n\n

\r\n

\r\n

option {\r\n  font-family:monospace;\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n