किसी भी कारण से छवि लिंक के बीच सीएसएस अंतराल

Question

मैं पिछले कुछ घंटों के लिए इस क्षैतिज नेविगेशन को हल करने की कोशिश कर रहा हूं और कुछ भी काम नहीं कर रहा है। मैंने reset.css स्टाइलशीट्स की कोशिश की है, * {पैडिंग: 0; मार्जिन: 0) आदि। और मेरे पास अभी भी मेरे छवि लिंक के बीच अंतराल है।

आप देखते हैं, नेविगेशन इनलाइन प्रदर्शित छवि लिंक की एक अनियमित सूची से बना है, लेकिन प्रत्येक छवि, बाएं, दाएं, ऊपर और नीचे के बीच अंतराल हैं और मैं क्यों नहीं देख सकता। यह सभी ब्राउज़रों में समान है। , http://pentathlongb-yorkshire.co.uk/tomsmith/Beansheaf/styles/fund2.css

शेष साइट की स्पष्ट रूप से अभी भी नहीं किया जाता है यह सिर्फ नेविगेशन मैं चिंतित हूँ है: Beansheaf Temporary

लिंक सीएसएस करने के लिए:

यहाँ पृष्ठ पर एक लिंक है, और इसलिए स्रोत है अभी के बारे में

Answer 1

नेविगेशन चल li रों बचने के लिए आप के बीच रिक्त स्थान को हटाने के लिए कम से least- दो विकल्प मिल गया है इनलाइन तत्वों।

<ul> 
    <li><a href="#"><img src="../hotel.jpg" /></a></li 
    ><li><a href="#"><img src="../foodDrink.jpg" /></a></li 
    ><li><a href="#"><img src="../meetingsConferences.jpg" /></a></li> 
</ul> 

ध्यान दें कि समापन </li> टैग बाद लाइन को बंद रहता है (पिछले एक को छोड़कर) है, जो वैध है और पठनीयता का कहना है (मेरे लिए, कम से कम)।

चारा नहीं है थोड़ा मेसियर

<ul> 
    <li><a href="#"><img src="../hotel.jpg" /></a></li><!-- 
    --><li><a href="#"><img src="../foodDrink.jpg" /></a></li><!-- 
    --><li><a href="#"><img src="../meetingsConferences.jpg" /></a></li> 
</ul> 

और बस एचटीएमएल टिप्पणी <!-- ... --> टिप्पणी आउट करने के लिए रिक्त स्थान है कि अन्यथा एक भी अंतरिक्ष में ढह किया जाएगा उपयोग करता है।

काश है (उदाहरण के लिए) को निर्दिष्ट करने की किसी तरह था:

ul li img {whitespace: none-between; } 

Answer 2

li तत्वों के बीच सभी रिक्त स्थान और रेखा-ब्रेक को हटाने का प्रयास करें।

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

Answer 3

अपने सीएसएस करने के लिए

#mainNav li { 
    float:left; 
} 

जोड़ें।

Answer 4

ऐसा इसलिए है क्योंकि एक HTML दस्तावेज़ में एक नई पंक्ति मुद्रित सामग्री में एक स्थान के रूप में व्याख्या की जाएगी। चूंकि आपके सभी 'ली' तत्व नई लाइनों पर हैं, इसलिए यह उनमें से प्रत्येक के बीच एक जगह जोड़ रहा है। सुनिश्चित करें कि आप उन्हें ब्लॉक तत्व के रूप में प्रदर्शित करते हैं और उन्हें बाईं ओर तैरते हैं ताकि वे समान रूप से एक साथ चल सकें।

Answer 5

आप सूची तत्वों तैर सकते हैं, तो सफेद स्थान दखलंदाजी नहीं करता है:

#mainNav li 
{ 
float: left; 
list-style-type: none; 
} 

Answer 6

एक और दृष्टिकोण, तैरता से परहेज, 0 करने के लिए कंटेनर पर font-size स्थापित करने के लिए, और फिर इसे फिर से सेट किया गया है वापस फूल, इस तरह के लिए साइन अप:

#mainNav 
{ font-size: 0} 

#mainNav li 
{ 
    display: inline; 
    list-style-type: none; 
    font-size: 1em 
} 

Answer 7

मैं ली टैग पर line-height विशेषता का उपयोग इसे ठीक करने के।

ul li { line-height:0; } 

Answer 8

छवियों लिंक नीचे खाई छवि डिफ़ॉल्ट रूप से आधार पाठ लाइन के साथ गठबंधन किया जा रहा है की वजह से है, तो आप इसे बस

li img { 
    vertical-align:bottom; 
} 

जादू की घोषणा का समाधान कर सकते हैं!

Answer 9

इसका सर्वोत्तम समाधान http://www.cssplay.co.uk/menus/centered.html से आता है। और उद्धरण:

हमें केवल एक बाहरी कंटेनर में उल टैग संलग्न करना है जिसमें 100% की चौड़ाई और अतिप्रवाह छिपाने के लिए सेट है।

<ul> टैग तब एक सापेक्ष स्थिति के साथ स्टाइल किया जाता है और 50% की बायीं स्थिति के साथ बाईं ओर तैरता है।

अंत में <li> टैग को एक सापेक्ष स्थिति के साथ स्टाइल किया गया है, बाएं फ्लोट किया गया है लेकिन इस बार 50% की सही स्थिति के साथ।

... और जैसा कि वे कहते हैं कि सब कुछ आवश्यक है।

Answer 10

अगर आप xslt का उपयोग कर रहे इन तत्व को दिखाने के लिए, आपको निम्न करना चाहिए:

<xsl:template match=".//text()"> 
    <xsl:value-of select="normalize-space(.)" /> 
</xsl:template>