प्रदर्शन: इनलाइन काम नहीं कर रहे

मैं एचटीएमएल और सीएसएस के लिए बिल्कुल नया हूं।प्रदर्शन: इनलाइन काम नहीं कर रहे

मैंने मूल बातें और कुछ उन्नत तकनीकों को सीखा लेकिन मुझे लंबे समय तक सूचियों के साथ समस्या हो रही है और मैं जानना चाहता हूं कि मैं अपनी समस्या को कैसे ठीक कर सकता हूं।

यहां विचार है।

मैं एक ऑनलाइन दुकान बना रहा हूं लेकिन मैं एक अलग आईडी का उपयोग कर प्रत्येक छवियों, ग्रंथों, लिंक को पोजीशन करना टालना चाहता हूं।

मुझे यह विचार था, मैं अपनी ली को एक div के अंदर रखूंगा, इस तरह, मेरी सूची के अंदर सबकुछ इस बॉक्स के अंदर फंस जाएगा, मेरे टेक्स्ट, लिंक, छवियों को ठीक से श्रेणीबद्ध करने के लिए कक्षा बनाएं, प्रदर्शन का उपयोग करें: इनलाइन और एट voila, मैं केवल एक वर्ग का उपयोग कर उत्पादों का एक पूरा पृष्ठ बना सकते हैं।

समस्या प्रदर्शित होती है: इनलाइन काम नहीं कर रही है।

अगर कोई इस पर मेरी मदद कर सकता है तो मैं वास्तव में इसकी सराहना करता हूं।

यह एक बुरा उदाहरण है, लेकिन आप सिद्धांत को समझते हैं।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
    #nav_bar {margin:0px;padding:0px;list-style-type:none;text-align:center;} 
    .nav_button {background-color:purple;width:100px;height:50px;} 
    .nav_button:hover {background-color:pink;} 
    .nav_button li {display:inline;} /* Not working ?!? */ 
    .nav_button a {position:relative;color:white;text-decoration:none;top:13px;} 
</style> 
</head> 

<body> 
    <table style="width:600px;margin:0 auto;"> 
     <tr> 
      <td> 
       <ul id="nav_bar"> 
        <div class="nav_button"> <li> <a href="#">Home</a> </li> </div> 
        <div class="nav_button"> <li> <a href="#">Contact us</a> </li> </div> 
        <div class="nav_button"> <li> <a href="#">Shipping</a> </li> </div> 
        <div class="nav_button"> <li> <a href="#">About us</a> </li> </div> 
       </ul> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

स्रोत

2012-08-15 Dany

display:inline बहुत सीमित है और यह करने के लिए जोड़ा के लिए किसी भी ब्लॉक स्तर स्टाइल अनुमति नहीं है। आप display:inline-block या float:left का उपयोग कर बेहतर बंद कर रहे हैं। ध्यान रखें कि यदि आप फ्लोट्स का उपयोग करते हैं तो आपको पैरेंट तत्व का अतिप्रवाह overflow:auto पर सेट करना होगा (IE < 8 के लिए दृश्यमान उपयोग करें) और यह काम करना चाहिए। पहले इनलाइन-ब्लॉक का प्रयोग करें।

स्रोत

2012-08-15 03:35:43 matsko

यह काम करता है, .nav_button li {} अनावश्यक था, मुझे बस इतना करना था कि फ्लोट का उपयोग करें: अंदर छोड़ दिया .nav_button। मीठा, मेरा विचार सब के बाद काम किया – Dany

कारण यह काम नहीं कर रहा है क्योंकि आप इसे एक div के अंदर उपयोग कर रहे हैं और div तत्व में केवल ली तत्व है, यदि आपके पास एक div के तहत एक से अधिक ली तत्व हैं तो इनलाइन संपत्ति काम करेगी।

कोशिश इस

<ul id="nav_bar"> 
    <li class="nav_button"> <a href="#">Home</a> </li> 
    <li class="nav_button"> <a href="#">Contact us</a> </li> 
    <li class="nav_button"> <a href="#">Shipping</a> </li> 
    <li class="nav_button" > <a href="#">About us</a> </li> 
</ul>

और सीएसएस के लिए

#nav_bar .nav_button {display:inline-block;}

या वैकल्पिक रूप से आप भी उपयोग कर सकते हैं:

#nav_bar .nav_button {float:left;width:40px;}/*you will need to specify the width*/

अगर आप float विधि का उपयोग सुनिश्चित करें कि आप एक तत्व का उपयोग कर रहे हैं अंत में clear:both; के साथ निर्दिष्ट।

स्रोत

2012-08-15 03:37:18 Amyth

ध्यान दें कि: यदि पेरेंट तत्व चौड़ाई horizantally प्रदर्शित करने के लिए बहुत छोटा है तो

ul { 
width: 20px; 
} 
li 
{ 
display: inline; 
}

काम नहीं करेगा।

यदि आप प्रदर्शित करते हैं तो ली तत्व के तहत: ब्लॉक; बयान जैसे

li 
{ 
display: inline; 
} 
li a{ 
display: block; 
}

काम नहीं करता है।

स्रोत

2016-11-04 17:25:51 Emre

प्रदर्शन: इनलाइन काम नहीं कर रहे

उत्तर

संबंधित मुद्दे