css - CSS 从内联元素中删除边距

Question

我在定位导航元素时遇到问题。

CSS：

#wrapper { width: 600px; margin: 0 auto; height: 300px; background: #f9f9f9; border: 1px solid #f0f0f0; }
#navigation { margin: 0 auto; text-align: center; }
.mylink { background: #666; color: #ccc; padding: 5px 10px; display: inline-block; }
.mylink:first-child { -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; }
.mylink:last-child { -webkit-border-top-right-radius: 10px; -moz-border-radius-topright: 10px; border-top-right-radius: 10px; }

HTML：

<div id="wrapper">
    <div id="navigation">
        <a class="mylink">Homepage</a>
        <a class="mylink">Second Page</a>
        <a class="mylink">Third Page</a>
    </div>
</div>

我想删除内联元素的边距。我也尝试了“浮动：左”变体。但是我不能在没有宽度值的情况下将元素居中。

有什么想法可以解决吗？

Answer 1

这是“内联块”的常见问题。您处理的不是边距，而是实际的空格字符。

这应该会有所帮助：http ://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

你没有边距，内联元素只考虑空格（空格，制表符，换行符，任何其他不可见的分隔符），要么使用块显示和浮动，要么在没有空格的情况下键入它，更新你的小提琴http:// jsfiddle.net/Rnmbx/1/