在SELECT選項中將一個單詞左對齊一個單詞

我正在通過合併兩個單詞來填充來自c＃代碼的選擇選項中的數據。現在我想讓一個字左對齊&另一個爲正確。怎麼做？在SELECT選項中將一個單詞左對齊一個單詞

我想輸出象下面這樣：

MD1  LAPTOP 
MD2  MOUSE 
MD311  KEY-BOARD 
MD45  HARD DISK

或

MD1   LAPTOP 
MD2   MOUSE 
MD311  KEY-BOARD 
MD45  HARD DISK

注：我需要的列表中選擇選項，只是因爲通過點擊項目我想顯示所選選項的細節項目。

來源

2013-12-19 Dhwani

從你期望的輸出，看起來像你只需要把你的2之間間隔相等作爲第二個單詞的單詞不是右對齊的。 – Tanner

@Tanner，我知道那個技巧，但我想通過對齊分叉。 – Dhwani

我不認爲這是可能的選擇內。您在技術上仍然可以創建自己的「下拉菜單」，這可以讓您執行任何您想要的格式。 – Viridis

也許你可以試試word-spacing：

<select name="mySelect"> 
    <option value="1">MD1 LAPTOP</option> 
    <option value="2">MD2 MOUSE</option> 
    <option value="3">MD3 KEY-BOARD</option> 
    <option value="4">MD4 HARD DISK</option> 
</select> 

... 

select, option { 
    word-spacing:20px; 
}

例子：http://jsfiddle.net/Ck9d8/1/

來源

2013-12-19 11:51:19 melancia

但是在MD55的情況下呢？ – Dhwani

我認爲這是解決方案。現在你可能不會滿意於「硬盤」這個詞，它們之間距離很遠。你可以簡單地繞過'假'空間實體的'字間距'; ' '。您可能也只想顯示有關選項元素的額外信息。看看http://jsfiddle.net/Ck9d8/2/ – nkmol

@DKS http://jsfiddle.net/Ck9d8/3/用一個3位數的數字，你想添加一個新的旁路。不過，我建議你尋找一個更好的支持解決方案，因爲這實際上並不支持。 – nkmol

你可以把每個單詞放到一個容器中，它是一個div或一個西班牙文，並在其中放置一些類來處理它們與CSS。最簡單的方法是給左跨度分配一個前綴寬度。例如：

HTML: 
<span class="left">MD1</span><span class="right">LAPTOP</span><br/> 
<span class="left">MD2</span><span class="right">LAPTOP</span><br/> 
<span class="left">MD3</span><span class="right">LAPTOP</span><br/> 
<span class="left">MD4</span><span class="right">LAPTOP</span><br/> 
<span class="left">MD5</span><span class="right">LAPTOP</span><br/> 

CSS: 
.left{ 
    display:inline-block; 
    width: 100px; 
}

一個工作小提琴：http://jsfiddle.net/f7J8k/

您還可以使用顯示器做到這一點：桌子上一個div容器，並顯示：錶行和顯示：表單元格爲每個「行」和「單元格」，然後設置單元格之間的空間，這將允許您有一個更靈活的佈局，但它更復雜。

或者，由於它是表格數據，只需使用一張表。

來源

2013-12-19 11:13:38 danielrozo

我需要使用SELECT OPTION只是因爲通過選擇單個選項項目，其相關的細節將被顯示。 – Dhwani

然後這是不可能的。選項不能在其中包含HTML並正確地設置它們的樣式。您需要將一些ul> li * n轉換爲使用jQuery（http://jsfiddle.net/f7J8k/1/）的選擇樣式和處理點擊，或者使用HTML實體，如@nkmol所述。 – danielrozo

只需在您的選項值之間使用所需的空格，如：

<select> 
    <option>MD1 &nbsp;&nbsp; LAPTOP</option> 
    <option>MD2 &nbsp;&nbsp; MOUSE</option> 
    <option>MD3 &nbsp;&nbsp; KEY-BOARD</option> 
    <option>MD4 &nbsp;&nbsp; HARD DISK</option> 
</select>

參見：http://jsfiddle.net/f7J8k/2/

來源

2013-12-19 11:29:55

@DKS通過添加容器並在其上應用類可以實現同樣的效果，因爲這是最簡單的工作。 –

在SELECT選項中將一個單詞左對齊一個單詞

回答

相關問題