ली नाव प्रदर्शन बनाम: इनलाइन

Question

वहाँ क्षैतिज सूची आइटम संरेखित के लिए float: left या display: inline के बाहर एक सबसे अच्छा विकल्प है?

जैसे: http://www.vanseodesign.com/css/simple-navigation-bar-with-css-and-xhtml/

व्यक्तिगत तौर पर मैं float नापसंद करते हैं, लेकिन हो सकता है कि तार्किक बजाय एक भावनात्मक बात की अधिक है।

Answer 1

ul { list-style-type: none; overflow: hidden; width:200px; } 
ul li { float:left; width: 100px; } 
ul li a { display: block; padding: 10px; width:80px; } 
ul li a:hover { background: black; } 


<ul> 
    <li><a href="http://www.facebook.com">Facebook</a></li> 
    <li><a href="httpt://www.google.com">Google</a></li> 
</ul> 

यह वही मैं ज्यादातर पसंद करते हैं क्योंकि जब आप का उपयोग display:inline आप चौड़ाई की तरह गुण, गद्दी (ऊपर और नीचे), मार्जिन आदि ... जो लेआउट उद्देश्यों के लिए एक बाधा है निर्धारित नहीं कर सकते है।

संपादित करें 2014

यह भी display: inline-block संपत्ति का उपयोग करने के एक विकल्प है। एक को ध्यान में रखना है कि एक बार जब आप सूची तत्व इनलाइन या इनलाइन-ब्लॉक बनाते हैं, तो सफेद-रिक्त स्थान पर विचार किया जाएगा। इसलिए, तत्वों के बीच अवांछित रिक्त स्थान होंगे।

ul { list-style-type: none; width: 300px; font-size: 0; } 
ul li { display: inline-block; *display: inline; zoom: 1; margin-right: 10px; } 
/* The *display and zoom is a IE hack, though can't remember 
    now which one (guess it is IE7) */ 
ul li a { display: inline-block; padding: 10px; font-size: 13px; } 

fiddle यहां देखें।

यदि आप font-size संपत्ति (ब्राउज़र संगतता समस्याओं के लिए) का उपयोग नहीं करना चाहते हैं, तो आप व्हाइटसाइट्स से छुटकारा पाने के लिए एचटीएमएल टिप्पणियों का भी उपयोग कर सकते हैं! हालांकि मैं उपर्युक्त विधि पसंद करता हूं।

<ul><!-- 
    --><li><a href="http://www.facebook.com">Facebook</a></li><!-- 
    --><li><a href="httpt://www.google.com">Google</a></li><!-- 
--></ul> 

Answer 2

क्रोम में LI की इनलाइन प्रदर्शित करते समय मैंने कुछ प्रतिपादन कीड़े देखी हैं। मेरी एलआई सीमा कभी-कभी उचित क्षैतिज पैडिंग के साथ प्रस्तुत नहीं करती है।

सामान्य हालांकि में, मैं इनलाइन पसंद है, यह अभी भी आप क्षैतिज मार्जिन और गद्दी देता है और आपको एक अच्छा पाठ के अनुरूप कर सकते हैं: केंद्र; उल पर और ऊर्ध्वाधर रिक्ति के लिए यूएल का उपयोग करें।

मैं विशुद्ध रूप से नाव का उपयोग करने के कारण एक LI डिफ़ॉल्ट रूप से एक ब्लॉक तत्व है और मेरी राय में इस तरह व्यवहार किया जाना चाहिए, लेकिन दोनों के लिए स्पष्ट उपयोग के मामलों रहे हैं जाते हैं।

Answer 3

क्या

के बारे में

li { 
     display:inline-block 
}; 

फिर आप चौड़ाई, ऊँचाइ, गद्दी, मार्जिन, आदि जैसे गुणों को सेट कर सकते हैं ..

Answer 4

यह व्यक्तिगत पसंद है।

एक सीएसएस बिंदु से, Display:Inline = Float:Left(Right)।
जब तत्व क्षैतिज बनाने की बात आती है, जैसे <li>।

सीएसएस नियम फ्लोट प्रदर्शन से नया है।