एचटीएमएल/सीएसएस - LI

Question

के लिए कोड में लाइन ब्रेक से रिक्त स्थान निकालें अरे, क्या ब्राउज़र में स्रोत में लाइन ब्रेक को अनदेखा करने का कोई तरीका है?

<div id="navbar"> 
    <div id="navbar-container"> 
     <ul> 
      <li>HOME</li> 
      <li>TUTORIALS</li> 
      <li>BLOG</li> 
      <li>FORUMS</li> 
      <li>LINKS</li> 
      <li>&nbsp;</li> 
     </ul> 
    </div> 
</div> 

#navbar { 
    background:#FFF; 
    width:940px; 
    margin:auto; 
    border-radius: 10px 10px; 
    -webkit-box-shadow: 5px 5px 10px #888; 
} 
#navbar-container { 
    margin:auto; 
} 
#navbar-container ul { 
    list-style:none; 
    text-align:center; 
    display:block; 
    width:auto; 
    padding:0; 
    margin:0; 
} 
#navbar-container li{ 
    list-style:none; 
    border-left:3px solid black; 
    display:inline-block; 
    font-family:"Arial", sans-serif; 
    font-size:2em; 
    padding:0 7px 0 10px; 
    margin:0; 
    white-space:nowrap; 
} 
#navbar-container li:hover{ 
    color:#FFF; 
    background:#000; 
    border-left:3px solid black; 
    display:inline-block; 
    font-family:"Arial", sans-serif; 
    font-size:2em; 
    margin:0; 
    padding:0 7px 0 10px; 
} 

यह प्रत्येक LI के बीच एक छोटी सी जगह रखने रहा है, मैं इसे सेट अप तो फिर क्षैतिज लाइन अप, मैं सिर्फ स्रोत में पंक्ति विराम को दूर कर सकता है, लेकिन आईडी नहीं पसंद करते हैं।

Answer 1

आप उन्हें (या तो left या right) तैर सकते हैं, या आप टिप्पणी आउट कर सकते हैं रिक्त स्थान:

<ul> 
    <li>...</li><!-- 
    --><li>...</li> 
</ul> 

या बस टिल अगले खुला टैग छोड़ ' लाइन।

<ul> 
    <li>...</li 
    ><li>...</li 
    ><li>...</li> 
</ul> 

Answer 2

सभी ब्राउज़रों को पूरी तरह से व्हाइटस्पेस को अनदेखा करना चाहिए। क्या आपको कोई विशेष ब्राउज़र परेशानी दे रहा है?

प्रयास करें:

li { margin: 0; padding: 0 } 

Answer 3

आईई उन दिनों से होल्ड-ओवर के रूप में ऐसा लगता है जब सूची आइटम में टैग बंद नहीं होते थे। कि चारों ओर एक आम तरीका है, समापन> अगली पंक्ति पर डाल दिया है यानी

<ul> 
     <li>HOME</li 
     ><li>TUTORIALS</li 
     ><li>BLOG</li 
     >etc... 

Answer 4

मैं एक ही बात सोच रहा था और क्या मेरे लिए काम किया था:

li { display: table-cell; } 

सभी टूटता अनदेखी कर रहे हैं और अब मेरे मेनू बटन एक दूसरे के बगल में हैं।

तुम मेरे संगीत की साइट पर यहाँ एक जीवित उदाहरण देख सकते हैं: http://www.yanike.tk

मैं अपने नेविगेशन मेनू (घर, मीडिया, ...) के लिए मेरे यूएल LI पर एक सीएसएस स्प्राइट का इस्तेमाल किया।