7
संदर्भ इस बेला की एक तालिका में एक बिना क्रम वाली सूची टर्निंग: http://jsfiddle.net/exGnZ/सामग्री
हाय, मैं एक बिना क्रम वाली सूची और नेता डॉट्स के साथ विषय सूची पुन: पेश करने की कोशिश कर रहा हूँ। दुर्भाग्यवश, जब सामग्री की एक लंबी लाइन होती है, तो प्रारूपण टूट जाता है। क्या किसी को पता है कि डॉट्स के समान रेखा पर दिखाई देने के लिए नीचे दी गई छवि में अध्याय 2 कैसे प्राप्त करें? http://jsfiddle.net/exGnZ/
मैं भी इसे यहाँ चिपकाने कर रहा हूँ:
<div>
<ul id="toc">
<li><span>Introduction</span> <a href="#">Chapter 1</a></li>
<li><span> Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming</span> <a href="#">Chapter 2</a></li>
<li><span>Sun breaks</span> <a href="#">Chapter 3</a></li>
<li><span>Lost and confused</span> <a href="#">Chapter 4</a></li>
<li><span>The pot of gold</span> <a href="#">Chapter 5</a></li>
<li><span>Nom nom nom</span> <a href="#">Chapter 6</a></li>
</ul></div>
और सीएसएस:
div {padding:10px;}
#toc {
list-style: none;
margin-bottom: 20px;
}
#toc li {
background: url(http://5thirtyone.com/sandbox/share/toc/dot.gif) repeat-x bottom left;
overflow: hidden;
padding-bottom: 2px;
}
#toc a,
#toc span {
display: inline-block;
background: #fff;
position: relative;
bottom: -4px;
}
#toc a {
float: right;
padding: 0 0 3px 2px;
}
#toc span {
float: left;
padding: 0 2px 3px 0;
}
यहाँ कोड मैं इस समय आपके पास यह है
ग्रेट सॉल्यूशन। एकमात्र चीज जो मैं चाहता हूं, मैं इसके बारे में बदल सकता हूं, बाईं ओर वाले पाठ को रेखांकित नहीं किया गया है, लेकिन मुझे लगता है कि यह उतना करीब है जितना हम वर्तमान ब्राउज़र के साथ प्राप्त कर सकते हैं ... इसे उत्तर के रूप में चुनना। – Fred
मैंने नोटिस किया था। अगर मेरे पास थोड़ा और समय था तो मुझे यकीन है कि मैं कुछ के साथ आ सकता हूं। हालांकि इस समय व्यस्त व्यस्त है। अगर मैं कुछ भी लेकर आऊंगा तो मैं बाद में पोस्ट करूंगा। – Deadlykipper
हे, एक अतिरिक्त अवधि (जो ब्लॉक स्तर नहीं है) समस्या हल करती है। एक इनलाइन-ब्लॉक अवधि चौड़ाई निर्धारित करेगा और एक (गैर-ब्लॉक स्तर अवधि) पृष्ठभूमि को सफेद सेट करने के लिए उपयोग किया जा सकता है। आपकी सहायताके लिए धन्यवाद! – Fred