सीएसएस के साथ चुनिंदा ऑप्टग्रुप के कई स्तरों को कैसे इंडेंट करें?

Question

बस गहराई से घोंसले के द्वारा ऑप्टग्रुप ब्लॉक को इंडेंट करने का प्रयास कर रहा है, मैंने सामान्य margin-left नियम, नेस्टेड तत्वों को फिर उसी नियम को लागू करने का प्रयास करने की कोशिश की है, padding-left ... इस तरह इंडेंट कर रहा है? यह प्राथमिक लगता है: पी

नीचे दिए गए उदाहरण में, 'client2_a' लेबल वाले ऑप्टग्रुप को दूसरों से अधिक इंडेंट किया जाना चाहिए, क्योंकि यह 'क्लाइंट 2' के अंदर घोंसला है।

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

Answer 1

8/29/2016 संपादित

नीचे मूल जवाब नहीं रह गया है आधुनिक ब्राउज़रों में कार्यात्मक है। जो लोग अभी भी बजाय HTML सूचियों के साथ जादू करने का एक टैग का उपयोग करने की आवश्यकता है के लिए, एक बेहतर समाधान इस stackoverflow धागे पर पाया गया था: Rendering a hierarchy of "OPTION"s in a "SELECT" tag

मैं समाधान igor-krupitsky ने सुझाव दिया है जो & nbsp छोड़ने का सुझाव की सिफारिश करेंगे; और बाइनरी & # 160 का उपयोग करना; बजाय। कम से कम क्रोम पर, यह सूची में किसी आइटम के पहले अक्षर को खोजने के लिए कीबोर्ड का उपयोग नहीं करता है।

समाप्ति संपादित

वर्तमान HTML विनिर्देश (जैसे खरोज के रूप में) किसी भी कार्यक्षमता जोड़ने नेस्टेड टैग के लिए प्रदान नहीं करता है। this link देखें।

इस बीच, आप सीएसएस के साथ मैन्युअल रूप से अपने स्तर को स्टाइल कर सकते हैं। मैं अपने नमूने में शैलियों का उपयोग कर की कोशिश की है, लेकिन किसी कारण से वे सही ढंग से प्रस्तुत करना नहीं किया, इसलिए कम से कम निम्नलिखित काम करेगा:

<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>

आशा है कि मदद करता है।

Answer 2

स्टाइल की तुलना में यह आश्चर्यजनक रूप से सरल है। जवाब मुझे strugling के afte घंटे आया :))। ऑप्टग्रुप और विकल्प टैग रीडिंग केवल मोड में स्ट्रिंग को परिभाषित कर रहे हैं, वास्तव में। इसलिए आपके लिए किसी भी समूह समूह या विकल्प सामग्री को इंडेंट करने के लिए, आप नामों या &nbsp में सरल स्थान का उपयोग करते हैं।

यह इतना आसान है :)!

Answer 3

लुइसियन के उत्तर में एक परिशिष्ट के रूप में, क्रोम के नए संस्करण टेक्स्ट में एम्बेडेड   का समर्थन करने के लिए प्रतीत नहीं होते हैं। यह आपको गैर-ब्रेकिंग स्पेस देने के बजाय वास्तव में एम्पर्सेंड आदि दिखाएगा। हालांकि, मैंने पाया कि गैर-ब्रेकिंग स्पेस के unicode version का उपयोग करना अभी भी ठीक काम करेगा।

मैं स्कैला का उपयोग कर रहा हूं इसलिए मेरे सर्वर-साइड कोड में "\u00A0" होने में सक्षम था। आप शायद यूनिकोड चरित्र को सीधे अपने कोड में पेस्ट कर सकते हैं लेकिन मैं इसकी अनुशंसा नहीं करता (सिर्फ इसलिए कि यह कहना मुश्किल होगा कि यह एक सामान्य स्थान नहीं है)।

एक अच्छी बात यह है कि कम से कम क्रोम कीबोर्ड नेविगेशन के मामले में रिक्त स्थान को अनदेखा कर देगा। अगर मेरे पास Test नाम का विकल्प है, तो t टाइप करना अभी भी हाइलाइट दाएं स्थानांतरित करेगा, इससे कोई फर्क नहीं पड़ता कि कितने गैर-ब्रेकिंग रिक्त स्थान इसे प्रीपेड करते हैं।

option { 
text-indent: 10px; 
} 

डन:

Answer 4

सीएसएस इस में जोड़े।