एचटीएमएल और सीएसएस में इंडेंट सूची

मैं सीएसएस के लिए नया हूं और सूची के साथ काम कर रहा हूं। मैं कोड मैं w3schools पर देखा पता चलता है जो सूचियों इंडेंट करने के लिए कैसे से एक का उपयोग करने की कोशिश की:एचटीएमएल और सीएसएस में इंडेंट सूची

<html> 
<body> 

<h4>A nested List:</h4> 
<ul> 
    <li>Coffee</li> 
    <li>Tea 
    <ul> 
    <li>Black tea</li> 
    <li>Green tea</li> 
    </ul> 
    </li> 
    <li>Milk</li> 
</ul> 

</body> 
</html>

मेरे सीएसएस यह अधिभावी है तो यह सभी एक ही खड़ी रेखा पर apears। क्या कोई सीएसएस कोड है जो मैं मुख्य सीएसएस फ़ाइल को ओवरराइड करने के लिए सूची में स्थानीय रूप से उपयोग कर सकता हूं? किसी भी सहायता की सराहना की जाएगी।

स्रोत

2011-08-08 Alan

लेकिन मुझे आपका सीएसएस नहीं दिखाई देता है ... – BoltClock

@ बोल्टक्लॉक: अपने प्रश्न विनिर्देशों के आधार पर, मुझे लगता है कि वह स्थानीय सीएसएस को स्थानीय रूप से ओवरराइड करने के तरीके से पूछना चाहता था।उस मामले में उनका मुख्य सीएसएस अप्रासंगिक है, लेकिन यदि यह मामला नहीं है, तो हाँ। –

हाँ, बस की तरह कुछ का उपयोग करें:

ul { 
    padding-left: 10px; 
}

और यह प्रत्येक उत्तरोत्तर पिक्सल 10 से ul टक्कर होगी।

Working jsFiddle

स्रोत

2011-08-08 17:08:39

आम तौर पर, सभी सूचियों खड़ी वैसे भी प्रदर्शित किया जा रहा है। तो क्या आप इसे क्षैतिज रूप से प्रदर्शित करना चाहते हैं?

वैसे भी, आपने मुख्य सीएसएस फ़ाइल को ओवरराइड करने और स्थानीय रूप से कुछ सीएसएस सेट करने के लिए कहा है। आप <ul> के अंदर style="" के साथ ऐसा नहीं कर सकते हैं, कि यह बच्चों (<li>) पर लागू होगा।

स्थानीय स्तर पर जोड़ तोड़ अपनी सूची होगी के निकटतम बात:

<style> 
    li {display: inline-block;} 
</style> 
<ul> 
    <li>Coffee</li> 
    <li>Tea 
    <ul> 
     <li>Black tea</li> 
     <li>Green tea</li> 
    </ul> 
    </li> 
    <li>Milk</li> 
</ul>

स्रोत

2011-08-08 17:20:17

मुझे बहुत संदेह है कि वह क्षैतिज वस्तुओं को देखना चाहता था क्योंकि वह सूचियों को इंडेंट करने के बारे में पूछता है। –

वही, लेकिन इसका मतलब स्थानीय सीएसएस पर एक उदाहरण के रूप में था। मुझे बहुत संदेह है कि, वह पैडिंग-बाएं सेट करना चाहता था: 10 पीएक्स; भी ..? –

ऐसा लगता है कि अपनी शैली के कुछ रीसेट किया जा रहा है लगता है।

अधिकांश ब्राउज़र में

डिफ़ॉल्ट रूप से, ul और ol रों margin है और padding उन्हें करने के लिए जोड़ा।

आप इस मामले में तो

ul, ol { //THERE MAY BE OTHER ELEMENTS IN THE LIST 
    margin:0; 
    padding:0; 
}

की तरह अपने सीएसएस के लिए एक लाइन जोड़कर इस ओवरराइड कर सकते हैं (और कई करते हैं), आप इस सूची से तत्व हटाने या एक margin/padding वापस जोड़ने के लिए, की तरह हैं इसलिए

ul{ 
    margin:1em; 
}

उदाहरण: http://jsfiddle.net/jasongennaro/vbMbQ/1/

स्रोत

2011-08-08 17:28:47

मैं एक ही समस्या नेस्टेड सूची में पाठ इंडेंट जोड़कर हल किया।

<h4>A nested List:</h4> 
<ul> 
    <li>Coffee</li> 
    <li>Tea 
    <ul id="list2"> 
    <li>Black tea</li> 
    <li>Green tea</li> 
    </ul> 
    </li> 
    <li>Milk</li> 
</ul> 

#list2 
{ 
text-indent:50px; 
}

स्रोत

2012-10-21 07:54:32

मार्कअप में आईडी या कक्षा का उपयोग करने से बचने के लिए एक बेहतर समाधान होगा और इसे सख्ती से सीएसएस के साथ करें। मार्जिन या पैडिंग एक बेहतर विकल्प हैं। – Octopus

के लिए आप [सटे भाई combinators] डब्ल्यू 3 सीएसएस चयनकर्ता सिफारिश में बताए अनुसार 1 तो तुम एक + चिह्न (या यहां तक कि एक ~ टिल्ड) का उपयोग कर सकते हैं के रूप में, नेस्टेड ul टैग के लिए एक गद्दी लागू आपके प्रश्न में वर्णित है और आपको वह परिणाम मिलेगा जो आपको चाहिए। मुझे यह भी लगता है कि आप स्थानीय सीएसएस को स्थानीय रूप से ओवरराइड करना चाहते हैं। आप ऐसा कर सकते हैं:

<style> 
    li+ul {padding-left: 20px;} 
</style>

इस तरह भीतरी ulli तत्वों की गोलियों सहित नेस्ट कर दिया जाएगा। मेरी इच्छा है कि यह सहायक हो! =)

स्रोत

2014-02-13 18:17:49 Metafaniel

एचटीएमएल और सीएसएस में इंडेंट सूची

उत्तर

संबंधित मुद्दे