Question

嗨，我在删除图像和导航栏之间的小间隙时遇到了一些麻烦。我老老实实地试过我能想到的一切。在我的ul和li级别设置内联块，并使用text-align：left似乎没有将超链接移动到div的最左侧，从那里我不确定应该做什么。有一个填充，但它不应该造成那么大的差距。

这是html代码：

        <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>

这是一个描述我正在谈论的内容。 http://jsfiddle.net/37VZb/1/

澄清我所说的差距是在图像的右边和最左边的导航栏元素之间。 enter image description here

Answer 1

这是因为内联（-block）元素之间的空格字符。这可以通过以这种方式评论该空间来解决：

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

<强> JSFiddle Demo

关于SO的类似主题：

How to remove the space between inline-block elements?

一个很好的参考：

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

更新

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

Web浏览器通常在列表元素上应用一些填充。要删除该集padding: 0;，请执行以下操作：

ul.nav { padding : 0; }

以下是 Updated Fiddle 。

Answer 2

您的间隙是一个白色空间，就像您在单词之间找到的那样，因为两个元素都设置为内联框。 在你的CSS中你设置somme padding到ul和a，它们都在那里。 http://jsfiddle.net/37VZb/8/

.nav_bar, .nav{
    padding:0;
    display:inline-block;
}

摆脱它：

1）不要缩进代码并关闭并打开元素的括号

2）在两者之间添加一个CSScomment来吞下那个空格

3）将font-size设置为0（IE为0.01px）到这些内联框的父级，并将其重置为1m（和/或px / pt）以用于img（alt）和nav_bar

不使用负边距或负字母间距，这是不可靠的，并不意味着关心这个

Answer 3

这是什么意思？您可以定位nav上的ul课程，并调整分配的默认边距

ul.nav{
  margin: 10px 0;
}

JSFIDDLE

为什么图像和导航栏之间存在差距

3 个答案:

更新