如何使用CSS縮進多個級別的select optgroup？

試圖通過嵌套深度縮進optgroup塊真的，我試過一般的margin-left規則，嵌套元素然後試圖應用相同的規則，試過padding-left ...是縮進這樣的可能嗎？這似乎是基本的：P如何使用CSS縮進多個級別的select optgroup？

在下面的例子中，標記爲'client2_a'的optgroup應該縮進比其他更多，因爲它嵌套在'client2'內部。

http://jsfiddle.net/Tb5Rc/5/

來源

2011-03-13 danjah

2016年8月29日編輯

下原來的答案不再是在現代瀏覽器的功能。對於那些誰仍然需要使用一個標籤，而不是做與HTML列表魔術，較好地解決了這個計算器線程發現：Rendering a hierarchy of "OPTION"s in a "SELECT" tag

我會建議由igor-krupitsky建議的解決方案誰建議下探& NBSP;並使用二進制代碼&＃160;代替。至少在Chrome上，這不會因使用鍵盤而中斷查找列表中項目的第一個字符。

結束編輯

當前HTML規範不提供用於嵌套標籤添加任何功能（如壓痕）。見this link。

與此同時，您可以使用CSS手動設置您的級別。我試着使用樣式您的樣品中，但出於某種原因，他們沒有正確地呈現，所以至少是下面的工作：

<select name="select_projects" id="select_projects"> 
 
     <option value="">project.xml</option> 
 
     <optgroup label="client1"> 
 
      <option value="">project2.xml</option> 
 
     </optgroup> 
 
     <optgroup label="client2"> 
 
      <option value="">project5.xml</option> 
 
      <option value="">project6.xml</option> 
 
      <optgroup label="client2_a"> 
 
       <option value="" style="margin-left:23px;">project7.xml</option> 
 
       <option value="" style="margin-left:23px;">project8.xml</option> 
 
      </optgroup> 
 
      <option value="">project3.xml</option> 
 
      <option value="">project4.xml</option> 
 
     </optgroup> 
 
     <option value="">project0.xml</option> 
 
     <option value="">project1.xml</option> 
 
    </select>

希望有所幫助。

來源

2011-04-22 01:39:50 eliel

徹底無益！好的，規範是 - 不是你。感謝您指出 - 是的，我想我會輸出許多單級optgroups，並給他們動態組織的縮進。 – danjah 2011-05-12 12:09:22

我最終離開了Select。列表更加可塑:) – danjah 2012-02-16 21:10:42

這根本不起作用。試用GC30和IE10。 – user323094 2013-10-12 21:44:48

它比造型簡單得多。答案在我苦苦掙扎之後來到了我身上:)）。 optgroup和option標籤以只讀模式定義字符串，actualy。因此，要縮進任何optgroup或選項內容，只需在名稱中使用簡單的空格或&nbsp。

就是這麼簡單:)！

來源

2012-02-27 18:34:47 lucian

我不知道你爲什麼會被拒絕投票，這是跛腳。這實際上是一個非常聰明的黑客工作。讚美你！ – viggity 2012-08-15 21:16:42

@viggity：...並打破可用性。 – 2013-02-15 16:24:46

@SébastienRenauld：當生活給你檸檬水......你罵W3C。 – sergserg 2014-02-22 19:32:20

作爲lucian回答的附錄，Chrome的新版本似乎不支持在文本中嵌入 。它實際上會顯示符號等，而不是給你不間斷的空間。但是，我發現使用非破壞空間的unicode version仍然可以正常工作。

我正在使用Scala，因此我的服務器端代碼中只能有"\u00A0"。你可能可以將Unicode字符直接粘貼到你的代碼中，但我不會推薦它（僅僅因爲它很難說它不是一個普通的空間）。

一件好事就是Chrome至少會忽略鍵盤導航方面的空間。如果我有一個名爲Test的選項，輸入t仍然會將突出顯示移動到該選項，無論有多少非打破空格預先設置它。

來源

2014-05-20 15:06:35 ShawnFumo

-1

加入的CSS這樣的：

option { 
text-indent: 10px; 
}

完成。

來源

2016-04-29 15:51:07 FollaPijas

如何使用CSS縮進多個級別的select optgroup？

回答

相關問題