का उपयोग: सीएसएस चयनकर्ता के बाद एक जगह भरने के लिए?

Question

this page पर मैं सफेद में भरे नेविगेशन के दाईं ओर पूरी जगह रखना चाहता हूं।

तो, मैं 5px विस्तृत सफेद का उपयोग कर ब्लॉक हासिल की: CSS चयनकर्ता के बाद, और कर रहा हूँ उम्मीद कर वहाँ यह उपलब्ध चौड़ाई फिट बनाने के लिए एक तरीका है, हालांकि मैं अन्य सुझावों के लिए खुला रहा हूँ !:

#menu-main-menu:after { 
    content:""; 
    display:block; 
    background:#fff; 
    width:5px; 
    height:30px; 
    float:right; 
    } 

<div class="menu"><ul id="menu-main-menu"> 
<li><a href="#">Home</a></li> 
<li><a href="#">About us</a></li> 
<li><a href="#">Courses &#038; prices</a></li> 
<li><a href="#">Activities in Rio</a></li> 
<li><a href="#">Accommodation</a></li> 
<li><a href="#">News</a></li> 
<li><a href="#">FAQs</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</div> 

और सभी प्रासंगिक सीएसएस:

#primary-menu ul { 
    overflow:hidden; 
} 
#primary-menu li { 
    list-style:none; 
    float:left; 
} 
#primary-menu a { 
    color:#333; 
    background: #fff; 
    display:block; 
} 
#primary-menu .current-menu-item a, #primary-menu .current-page-parent a { 
    color:#fff; 
    background:none; 
} 
#menu-main-menu:before { 
content:""; 
display:block; 
background:#fff; 
width:20px; 
height:30px; 
float:left; 
} 
#menu-main-menu:after { 
content:""; 
display:block; 
background:#fff; 
width:5px; 
height:30px; 
float:right; 
} 

धन्यवाद यहाँ सरलीकृत HTML है मेरा प्रश्न देखने के लिए समय निकालने के लिए! नीचे

कैरोलीन

Answer 1

आप #menu-main-menu के बजाय li.current-menu-item करने के लिए ::after छद्म चयनकर्ता जोड़ सकते हैं और उस तत्व के बाद से सफेद पृष्ठभूमि जोड़ सकते हैं।

.current-menu-item:after { 
    background: none repeat scroll 0 0 #fff; 
    content: ""; 
    height: 30px; 
    position: absolute; 
    right: -1000px; /* these numbers are the same */ 
    top: 0; 
    width: 1000px; /* and need to be at least the width of the menu */ 
} 

#primary-menu li { 
    position: relative; /* position the ::after element relative to the li */ 
} 

#primary-menu ul { 
    .... 
    overflow: hidden; /* you already have this to clear your floats */ 
    ....    /* but I thought I should emphasise that you need it */ 
} 

Answer 2

उदाहरण एक अतिरिक्त li जोड़ने को भरने के लिए कार्य करती है, लेकिन जब से फ़ॉन्ट ब्राउज़रों के बीच dirrentely प्रस्तुत करना होगा आप चौड़ाई अनुमान नहीं लगा सकते। इस उदाहरण में वर्कअराउंड सामग्री को केंद्रित करने और चौड़ाई को सेट करने के लिए एक कंटेनर (#cen) बनाता है, overflow संपत्ति छिपी हुई है। ऐसा करने से आप ul और फिलर li को आवश्यकतानुसार बहुत अधिक चौड़ाई के साथ लपेटने में काफी बड़ा div जोड़ सकते हैं। जिसके कारण कोई समस्या नहीं होती है क्योंकि माता-पिता अतिप्रवाह है।

http://jsfiddle.net/efortis/3YpDh/1/

<div id="cen"> 
    <div class="menu"> 
    <ul id="menu-main-menu"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About us</a></li> 
     <li><a href="#">Courses &#038; prices</a></li> 
     <li><a href="#">Activities in Rio</a></li> 
     <li><a href="#">Accommodation</a></li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">FAQs</a></li> 
     <li><a href="#">Contact</a></li> 
     <li class="filler">&nbsp;</li> 
    </ul> 
    </div> 
</div> 


#cen { 
    width: 960px; 
    margin: 0 auto;  
    overflow: hidden; 
} 
.menu { 
    width: 1200px; 
    float:left; 
} 

li { 
    padding: 10px 25px; 
    float:left; 
    background: white; 
} 

.filler { 
    width: 200px;  
} 

Answer 3

li पर float से छुटकारा तो आप बस :before और :after pseudos के लिए कोई आवश्यकता एक स्थान को भरने के बिना उनके ul माता पिता पर display: block;background: white परिभाषित करने के लिए अनुमति देता है। यह uldisplay: block की वजह से पहले से ही 100% चौड़ाई होगी।

ऐसा करने के लिए, आप के रूप में inline-block (display: inline और zoom: 1 IE6/7 के लिए) प्रत्येक आइटम प्रदर्शित कर सकते हैं और छड़ी समापन और उद्घाटन </li><li> टैग उन दोनों के बीच खाली स्थान के बचने के लिए। बेला में

See this fiddle

बोनस: एक दूसरे उदाहरण में, आइटम सभी उपलब्ध चौड़ाई पर कब्जा table-cell (सीएसएस मूल्य का उपयोग कर, नहीं द्वारा (जरूरी सुंदर नहीं, अपने डिजाइन और मेनू की निर्भर करता है) असुरक्षित table>tr>td एचटीएमएल कोड, ज़ाहिर है)। आईई 6/7 के लिए, उपरोक्त (और समान प्रतिपादन) के समान फॉलबैक।