नेविगेशन के लिए विभाजक

Question

मुझे नेविगेशन के तत्वों के बीच विभाजक जोड़ने की आवश्यकता है। विभाजक चित्र हैं।

मेरे HTML संरचना की तरह है: ol > li > a > img।

यहां मैं दो संभावित समाधानों पर आता हूं:

1. liजुदाई के लिए और टैग जोड़ने के लिए (बू!),
2. प्रत्येक तत्व की छवि में विभाजक शामिल करें (यह बेहतर है, लेकिन यह संभावना है कि उपयोगकर्ता पर क्लिक कर सकता है, उदाहरण के लिए, "होम", लेकिन "सेवाएं" पर जाएं, क्योंकि वे एक के पीछे एक हैं और उपयोगकर्ता गलती से विभाजक पर क्लिक कर सकते हैं कि "सेवाओं" से संबंधित है);

क्या करें?

Comments

कलात्मक प्रस्तुति के लिए +1।

— जेम्स पी।

Answer 1

बस पर एक पृष्ठभूमि छवि के रूप में विभाजक छवि का उपयोग करें li।

इसे केवल सूची आइटम के बीच में लाने के लिए, छवि को बाईं ओर रखें li, लेकिन पहले वाले पर नहीं।

उदाहरण के लिए:

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

यह सीएसएस छवि को प्रत्येक सूची आइटम में जोड़ता है जो किसी अन्य सूची आइटम का अनुसरण करता है - दूसरे शब्दों में उनमें से सभी पहले लेकिन।

एनबी। अवगत हो चयनकर्ता (ली + ली) IE6 में काम नहीं करता है, इसलिए आपको बस पृष्ठभूमि छवि को पारंपरिक ली (सशर्त स्टाइलशीट के साथ) जोड़ना होगा और शायद किनारों में से एक पर एक नकारात्मक मार्जिन लागू करना होगा।

Comments

:beforeछद्म चयनकर्ता का उपयोग करना इसे अंतिम तत्व के बाद प्रदर्शित होने से रोकता है।

— 3

अच्छा समाधान-आकर्षण एक आकर्षण की तरह -6 समर्थन? किसे पड़ी है! :) अगर हम सभी विरासत के ब्राउज़र का समर्थन करना बंद कर देते हैं तो शायद हम लोगों को उनका उपयोग बंद करने के लिए मजबूर करेंगे।

— जॉर्डन

border-leftवस्तुओं के बीच एक ऊर्ध्वाधर रेखा खींचने के लिए एक च्राम की तरह काम करता है ।

— रिचर्ड-डिगेंन

Answer 2

यदि विभाजकों के लिए छवियों का उपयोग करने के लिए दबाव की आवश्यकता नहीं है, तो आप शुद्ध CSS के साथ ऐसा कर सकते हैं।

nav li + li:before{
    content: " | ";
    padding: 0 10px;
}

यह प्रत्येक सूची आइटम के बीच एक बार डालता है, जैसा कि वर्णित मूल प्रश्न में छवि है। लेकिन जब से हम आसन्न चयनकर्ताओं का उपयोग कर रहे हैं , यह पहले तत्व से पहले पट्टी नहीं डालता है। और चूंकि हम :beforeछद्म चयनकर्ता का उपयोग कर रहे हैं , यह अंत में एक नहीं डालता है।

Comments

वाह! यह वही है जो मुझे अपने पाद लेख मेनू के लिए आवश्यक था। बेशक कुछ अतिरिक्त सीएसएस के साथ।

— व्लादिमीर

तकनीकी रूप से आप अभी भी एक छवि का उपयोग कर सकते हैं, लेकिन base64 इसे एन्कोड करता है और छवि इनलाइन को संग्रहीत करता है। css-tricks.com/data-uris

— commadelimited

@ चोट के कारण भी विभाजकों की स्थिति को लंबवत रूप से बदलना संभव है? यह शीर्ष पैडिंग / मार्जिन पर प्रतिक्रिया नहीं दे रहा है।

— फ्लोरिस

Answer 3

आप एक liतत्व जोड़ सकते हैं जहाँ आप विभक्त जोड़ना चाहते हैं

<ul>
    <li> your content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> NExt content </li>
    <li class="divider-vertical-second-menu"></li>
    <li> last item </li>
</ul>

CSS में आप निम्नलिखित कोड जोड़ सकते हैं।

.divider-vertical-second-menu{
   height: 40px;
   width: 1px;
   margin: 0 5px;
   overflow: hidden;
   background-color: #DDD;
   border-right: 2px solid #FFF;
}

इससे आपको निष्पादन की गति बढ़ जाएगी क्योंकि यह किसी भी छवि को लोड नहीं करेगा। बस इसका परीक्षण करें .. :)

Comments

क्या आप कृपया बता सकते हैं कि कैसे? लेकिन हमेशा अन्य तरीके से ... CSS3: हम Nth Element प्राप्त कर सकते हैं और इसमें Divider जोड़ सकते हैं।

— राजीव पिंगले

Drat, कुछ गड़बड़ मैं खुद में मिला। मैंने मानकों के दस्तावेजों, आरडब्लूडी पैम्फलेट्स में लगभग 30 मिनट का समय बिताया, और अपनी बात साबित करने के लिए अलग-अलग स्क्रीन पाठकों की भी कोशिश की। हालाँकि, कम से कम स्क्रीन रीडर पर्याप्त चालाक हैं जो खाली गोलियों को नहीं पढ़ते हैं (न ही @ उल @ के बजाय @ ओल @ का उपयोग करते समय अनुपस्थित अनुपस्थित विकल्प)। इसलिए मैं केवल यह बता सकता हूं कि कॉलम लेआउट को प्राप्त करने के लिए तालिका के उपयोग के रूप में यहाँ @ ली @ का उपयोग उसी श्रेणी में है।

— वोल्कर स्टोलज़

Answer 4

अन्य समाधान ठीक है, लेकिन उपयोग करने पर बहुत अंतिम में विभाजक जोड़ने की आवश्यकता नहीं है : यदि उपयोग करने के बाद या बहुत शुरुआत में : पहले ।

इसलिए:

मामला: के बाद

.link:after {
  content: '|';
  padding: 0 1rem;
}

.link:last-child:after {
  content: '';
}

मामला: पहले

.link:before {
  content: '|';
  padding: 0 1rem;
}

.link:first-child:before {
  content: '';
}

Answer 5

मेनू पाठ के सापेक्ष विभाजक को लंबवत रूप से केंद्रित करने के लिए,

.menustyle li + li:before

    {
        content: " | ";
        padding: 0;
        position: relative; 
        top: -2px;
    }

Answer 6

विभाजक को liपृष्ठभूमि में जोड़ें और सुनिश्चित करें कि विभाजक को कवर करने के लिए लिंक का विस्तार नहीं होता है, जिसका अर्थ है कि विभाजक क्लिक-सक्षम नहीं होगा।

Answer 7

Sass का उपयोग करने वालों के लिए , मैंने इस उद्देश्य के लिए एक मिक्सिन लिखा है :

@mixin addSeparator($element, $separator, $padding) {
    #{$element+'+'+$element}:before {
        content: $separator;
        padding: 0 $padding;
    }
}

उदाहरण:

@include addSeparator('li', '|', 1em);

जो आपको यह देगा:

li+li:before {
  content: "|";
  padding: 0 1em;
}

Comments

यह '|' नहीं दिखा रहा है किसी कारण के लिए? किसी भी कारण से क्यों नहीं?

— जेम्स ११

चिंता मत करो मैं समझ गया कि यह कैसे करना है। मुझे यह भी जोड़ना था: बच्चे की सामग्री बनाने के लिए आखिरी बच्चे के बाद जिसे एक

— सेपरेटर

Answer 8

मेरा मानना ​​है कि इसके लिए सबसे अच्छा समाधान है, जो मैं उपयोग करता हूं, और यह एक प्राकृतिक सीएसएस सीमा है:

border-right:1px solid;

आपको गद्दी की देखभाल करने की आवश्यकता हो सकती है जैसे:

padding-left: 5px;
padding-right: 5px;

अंत में, यदि आप नहीं चाहते हैं कि अंतिम सीमा उस अलग सीमा की है, तो इसे अंतिम बच्चे को "सीमा-दाहिनी ओर" इस ​​तरह से "कोई भी" न दें:

li:last-child{
  border-right:none;
}

सौभाग्य :)

Answer 9

इसे सूची तत्व की पृष्ठभूमि के रूप में रखें:

<ul id="nav">
    <li><a><img /></a></li>
    ...
    <li><a><img /></a></li>
</ul>

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
/* left padding creates a gap between links */

अगला, मैं एक्सेसिबिलिटी के लिए एक अलग मार्कअप की सलाह देता हूं:
इमेज इनलाइन को एम्बेड करने के बजाय टेक्स्ट को टेक्स्ट के रूप में डालें, प्रत्येक को एक स्पैन के साथ घेरें, इमेज को बैकग्राउंड ए के रूप में लागू करें, और फिर टेक्स्ट को डिस्प्ले के साथ छिपाएं: कोई नहीं - यह बहुत अधिक स्टाइलिंग फ्लेक्सिबिल्टी देता है, और आपको 1px चौड़ी बीजी छवि के साथ टाइलिंग का उपयोग करने की अनुमति देता है, बैंडविड्थ बचाता है, और आप इसे सीएसएस स्प्राइट में एम्बेड कर सकते हैं, जो HTTP कॉल बचाता है:

HTML:

<ul id="nav">
    <li><a><span>link text</span></a></li>
    ...
    <li><a><span>link text</span></a></li>
</ul

सीएसएस:

#nav li{background: url(/images/separator.gif) no-repeat left; padding-left:20px;} 
#nav a{background: url(/images/nav-bg.gif) repeat-x;}
#nav a span{display:none;}

अद्यतन ठीक है, मैं दूसरों मेरे सामने में इसी तरह के जवाब मिल गया देखते हैं - और मैं ध्यान दें, ली + ली चयनकर्ता का उपयोग करके कि जॉन भी पहला तत्व से पहले प्रदर्शित होने से विभाजक रखने के लिए एक साधन भी शामिल है - किसी भी ली एक के बाद आ रहा है जिसका अर्थ है ली।

Comments

हां - मैंने बस यही देखा, और आप सही हैं। मेरा उत्तर संपादित किया गया है, और जब से आपने नेतृत्व किया है, मैं आपका +1 तैयार कर रहा हूं।

— फॉस्ट

धन्यवाद। +1 को पैडिंग के लिए जिसे मैं जोड़ना भूल गया।

— ajcw