सीएसएस में कॉर्ड से अलग टेक्स्ट

Question

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

उदाहरण के लिए, निम्नलिखित सूची apple, orange, banana के रूप में प्रस्तुत की जानी चाहिए (सूची के अंत में लापता कॉमा नोट करें)।

<ul id="taglist"> 
    <li>apple</li> 
    <li>orange</li> 
    <li>banana</li> 
</ul> 

वर्तमान में, मैं इस सूची स्टाइल है, जो लगभग करता है कि मैं क्या चाहता हूँ, लेकिन (ध्यान दें केले के बाद अनुगामी अल्पविराम) apple, orange, banana, के रूप में सूची प्रस्तुत करने के लिए निम्नलिखित सीएसएस का उपयोग कर रहा हूँ।

#taglist { 
    display: inline; 
    list-style: none; 
} 

#taglist li { 
    display: inline; 
} 

#taglist li:after { 
    content: ", "; 
} 

क्या शुद्ध सीएसएस के साथ इस समस्या को हल करने का कोई तरीका है?

Answer 1

अनुगामी अल्पविराम निकालने के लिए, :last-child छद्म वर्ग है, इसलिए की तरह उपयोग करें:

#taglist li:last-child:after { 
    content: ""; 
} 

Answer 2

यह ब्राउज़र कार्यान्वयन पर निर्भर करता है, लेकिन यह काम करना चाहिए। हालांकि यह first-child पर निर्भर करता है, जो इसके उपयोग को सीमित कर सकता है, लेकिन अनिवार्य रूप से इसके बाद सूची-आइटम से पहले कॉमा-स्पेस ", " डालता है। मुझे यकीन नहीं है कि कैसे padding/margin एस इसे प्रभावित करेगा, लेकिन यदि आप 'प्रदर्शन: इनलाइन का उपयोग करते हैं; मार्जिन और पैडिंग शून्य पर सेट के साथ, यह ठीक होना चाहिए।

#taglist li:before {content: ", ";} 
#taglist first-child {content: ""; } /* empty string */ 

---

संपादित: जैकब द्वारा टिप्पणी में की पेशकश की सुधार के लिए प्रतिक्रिया करने।

निम्नलिखित काम करता है (डेमो यहाँ पेज: http://davidrhysthomas.co.uk/so/liststyles.html:

#taglist {width: 50%; 
     margin: 1em auto; 
     padding: 0; 
     } 

li  {display: inline; 
     margin: 0; 
     padding: 0; 
     } 

li:before {content: ", "; 
     } 

#taglist li:first-child:before 
     {content: ""; 
     } 

हालांकि अल्पविराम का अजीब चल-इन-द-मिडल-ऑफ-द कहीं नहीं रहे हैं, और, ईमानदारी से, मैं स्वीकार किए जाते हैं जवाब वैसे भी पसंद करते हैं। लेकिन अभी तो मैं एक बुरी तरह टूटा जवाब चारों ओर झूठ बोल रही है नहीं जा रहा था, मैंने सोचा। मैं इसे ठीक करना चाहिए

धन्यवाद, जेकब।

Answer 3

कोई शुद्ध सीएसएस जिस तरह से यह है कि ऐसा करने के लिए (धन्यवाद पार ब्राउज़र संगत है माइक्रोसॉफ्ट के लिए)। मैं सु सर्वर-साइड लॉजिक के साथ बस इसे करें।

आप आखिरी ली पर last कक्षा का उपयोग करके और सभी लिस के लिए पृष्ठभूमि छवियों का उपयोग करने के साथ निकटतम हो सकते हैं लेकिन अंतिम, लेकिन आप ऐसा करने में सक्षम नहीं होंगे: अंतिम-बच्चे और सामग्री: आईईएस में।

Answer 4

इस तरह है कि A List Apart पर लोग उनके लेख "Taming Lists" में सलाह देते हैं:

#taglist ul li:after { 
    content: ","; 
} 

#taglist ul li.last:after { 
    content: ""; 
} 

यह आपकी सूची में अंतिम आइटम "पिछले" का एक class विशेषता मान के साथ टैग होने की आवश्यकता है:

<ul id="taglist"> 
    <li>apple</li> 
    <li>orange</li> 
    <li class="last">banana</li> 
</ul> 

Answer 5

बदलें एक अपने नियम

#taglist li:after { 
    content: ", "; 
} 

सिर्फ एक और एक

#taglist li + li:before { 
    content: ", "; 
} 

पेशेवरों के साथ

:

• एक नियम सब काम है।
• पिछले नियम को रद्द करने के लिए कोई नियम नहीं,
• IE8 समर्थन

Answer 6

यह CSS3 आप छद्म चयनकर्ता last-child और not एक ही बार में उपयोग कर सकते हैं के साथ आसान है:

ul#taglist li:not(:last-child):after { 
    content: ", "; 
} 

चेक यहाँ परिणाम https://jsfiddle.net/vpd4bnq1/