为什么在图像和导航栏之间有一个差距 [英] Why is there a gap between image and navigation bar

问题描述

您好，我有一些麻烦，删除图像和我的导航栏之间的一个小差距。我真的试过了我可以想到的一切。在我的ul和li级别设置inline-blocks，并使用text-align：left似乎没有将超链接移动到div的最左边，从那里我不知道应该做什么。有一个填充，但它不应该造成很大的差距。

这里是html代码：

 < div id =header> 
< img src =img.png/> 
< div id =nav_bar> 
< ul class =nav> 
< li class =nav>< a href =＃>首页< / a>< / li> 
< li class =nav>< a href =＃>我们的产品< / a>< / li> 
< li class =nav>< a href =＃> Categories< / a>< / li& 
< li class =nav>< a href =＃>关于我们< / a>< / li& 
< li class =nav>< a href =＃>与我们联系< / a>< / li> 
< / ul> 
< / div> 
< / div> 
  

这里是一个jfiddle描述我在说什么。

。

SO上的类似主题：

• 如何删除inline-block元素之间的空格？

和一个很好的参考：

• http://css-tricks.com/fighting-the-space-between-inline-block-elements/

< h3>更新

剩余空间属于< ul> 元素上的用户代理应用样式。 / p>

Web浏览器通常在列表元素上应用一些填充。要删除该集合 padding：0; 如下：

  ul.nav {padding：0; } 
  

这里是 更新小提琴 。

Hi I'm having some trouble removing a small gap between an image and my navigation bar. I've honestly tried just about everything i can think of. Setting inline-blocks on my ul and li level, and using text-align: left don't seem to be moving the hyperlinks to the left-most side of the div, and from there I'm not to sure what should be done. There is a padding, but it shouldn't be causing that much of a gap.

Here is the html code:

        <div id = "header">
        <img src ="img.png"/>   
           <div id ="nav_bar">
            <ul class="nav">
                <li class= "nav"><a href="#">Home</a></li>
                <li class= "nav"><a href="#">Our Products</a></li>
                <li class= "nav"><a href="#">Categories</a></li>
                <li class= "nav"><a href="#">About Us</a></li>
                <li class= "nav"><a href="#">Contact Us</a></li>
            </ul>
           </div>
        </div>        

Here's a jfiddle describing what I'm talking about. http://jsfiddle.net/37VZb/1/

To clarify the gap I'm talking about is between the right of the image and the left most nav bar element.

解决方案

That's because of a space character between inline(-block) elements. This could be fixed by commenting that space out this way:

<img src ="http://www.leapcms.com/images/100pixels1.gif"/><!--
--><div id ="nav_bar"> ...

JSFiddle Demo.

Similar topic on SO:

• How to remove the space between inline-block elements?

And a good reference:

• http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Update

The remaining space belongs to the user agent applied style on the <ul> element.

Web browsers usually apply some padding on the list elements. To remove that set padding: 0; as follows:

ul.nav { padding : 0; }

Here is the Updated Fiddle.

这篇关于为什么在图像和导航栏之间有一个差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！