對齊下拉列表中的文本選項元素

我有一個HTML頁面，其中用戶將選擇顯示與事件相關的信息。因此，我希望下拉列表中的每個選項都顯示一個日期，X出現在Y.在選項列表中，我希望日期左對齊，然後「X」在不同選項之間對齊，那麼這個「Y」就會彼此對齊（我相信這會讓人們在掃描列表時更容易看到差異）。對齊下拉列表中的文本選項元素

基本上（是最好的，我可以在這裏渲染），這是我想要做什麼：選擇項中

1/1/2000 This thing shipped   to Anywhere, KS 
12/18/2003 The other thing installed at Nowhere, NV 
3/22/2007 The darned thing failed  in Roswell, NM 
      ^2nd block aligned  ^3rd block aligned

我試過div的，但是這並沒有區別。

我已經詳盡地搜索了一些沿着這些線條的東西，但是我還沒有發現任何東西甚至接近（只有關於如何居中對齊整個選項文本的問題等）。這是甚麼可能嗎？

來源

2015-02-08 Big_Al_Tx

如果你想要這樣的格式化，select不是這樣做的。選項標籤中不允許使用HTML。根據the MDN，選項標籤的允許內容爲：

帶有最終轉義字符的文本（如＆eacute;）。

如果你想保持「外觀」，你需要找到一種不同的方法，比如每行第一列有一個單選按鈕的表格。

來源

2015-02-08 21:17:34 bobdye

感謝@ bobdye您的迴應。不過我希望至少有更多，但！我想到的另一種方法是使用等寬字體並手動調整字符串長度。我只需要經過結果集至少兩次（這樣我就可以確定哪些記錄在每列中有最長的字符串並相應地進行調整）。 – 2015-02-11 02:50:09

這可能會起作用，但您可能會發現瀏覽器之間的差異，這意味着它可能在一個瀏覽器中看起來不正確，而不是其他瀏覽器。此外，您需要爲空格使用非中斷空格，以防止瀏覽器將它們摺疊爲1個空格。我不知道是否有像等寬空間那樣的東西。 – bobdye 2015-02-11 15:29:03

是的。另一個影響是，等寬字體與其他頁面上使用的其他字體不一致。 – 2015-02-13 02:26:19

對齊下拉列表中的文本選項元素

回答

相關問題