अनॉर्डर्ड सूची एक div

Question

में बाईं ओर सभी तरह से संरेखित नहीं कर रही है मेरे पास एक असाधारण सूची है जिसे मैं एक साधारण नेविगेशन बार के रूप में उपयोग कर रहा हूं। यही कारण है कि नीचे की तरह दिखता है:

आप देख कि हालांकि <li> तत्वों <div> के बाईं वे में निहित हैं मैं युक्त <div> में text-align: left; की कोशिश की है, लेकिन ऐसा लगता है कि करने के लिए सभी तरह से संरेखित नहीं कर रहे हैं कर सकते हैं। कोई प्रभाव नहीं है।

प्रासंगिक HTML:

<div id="menu">                   
    <div id="menutop">                 
     <ul>                    
      <li><a href="#">Home</a></li>            
      <li><a href="#">About</a></li>            
     </ul>                   
    </div>  

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

#menu { 
    width: 800px; 
    margin: 0 auto; 
} 

#menu div { 
    float: left; 
    width: 400px; 
    height: 60px; 
    background-color: #CACACA; 
} 

#menutop { 
    text-align: left; 
} 

#menutop ul { 
    list-style: none; 
} 

#menutop li { 
    display: inline; 
    padding: 10px; 
} 

#menutop a { 
    color: #000000; 
    text-decoration: none; 
} 

#menutop a:hover { 
    text-decoration: underline; 
} 

कोई भी विचार?

Answer 1

ul और li डिफ़ॉल्ट रूप से ब्राउज़र के आधार पर मार्जिन या पैडिंग है। आप अपने मेनू के भीतर इस डिफ़ॉल्ट शैली ओवरराइड करने के लिए की जरूरत है:

#menu ul, #menu li { 
    margin: 0; padding: 0; 
} 

डेमो देखें here

^{नोट: डिफ़ॉल्ट रूप से, jsfiddles एक सीएसएस रीसेट हो जाता है, इसलिए हमेशा अच्छी तरह से बात इस तरह का परीक्षण करने के लिए अनुकूल नहीं है । इस प्रकार की बग की तलाश करते समय "सामान्यीकृत सीएसएस" को अक्षम करना सुनिश्चित करें।}

Answer 2

CSS Reset का उपयोग करने का प्रयास करें।

सरलतम रूप है:

* { margin: 0; padding: 0; } 

Answer 3

<ul> तत्व संरेखित छोड़ दिया है, लेकिन <li> तत्वों 10px करने के लिए padding-left सेट है। यही कारण है कि पहला तत्व दाईं ओर थोड़ा सा है।

Answer 4

आप उल और ली पैडिंग और मार्जिन को ओवरराइड कर सकते हैं।

इस सरल कोड:

.menu ul, .menu li{ 
    margin:0; 
    padding:0; 
} 

Answer 5

आप मार्जिन और मेनू की गद्दी से हटा सकते हैं

#menu *{ 
margin:0; 
padding:0; 
} 

Answer 6

सेट गद्दी, मार्जिन 0px,

#menutop ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 

Demo

http://jsfiddle.net/tQb75/