CSS从内联元素中删除边距

时间:2012-10-07 10:06:19

标签: css center margin inline

我在定位导航元素方面遇到了问题。

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>

我想删除内联元素的边距。 我也试过了“浮动:左”的变化。但是,如果没有宽度值,我就无法将这些元素集中在一起。

我有什么想法可以解决它?

2 个答案:

答案 0 :(得分:2)

这是'内联块'的常见问题。你没有处理保证金,而是处理实际的空间特征。

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

答案 1 :(得分:1)

你没有边距,内联元素只需要考虑空格(空格,制表符,换行符,其他任何不可见的分隔符),使用块显示和浮点数或者在没有空格的情况下键入它,更新你的小提琴{ {3}}