为什么链接背景会重叠父母的兄弟姐妹

我做了以下非常简单的HTML页面

<html>
<head>
    <style>
    a {
        padding: 5px;
        background-color: blue;
        color: white;
    }
    #header {
        background-color: orange;
        height: 50px;
    }
    </style>
</head>
<body>
    <div id="header"></div>
    <div> 
        <a href="/foo">foo</a>
        <a href="/foo">foo</a>
    </div>
</body>
</html>

正如您在此演示中看到的，链接的蓝色背景与其父级兄弟姐妹的橙色背景重叠（带有 id="header" 的div ）。如何在不删除链接填充的情况下防止这种情况发生？

如果尝试向内联元素添加维度，某些属性将应用，某些属性将被部分应用，而其他属性将被应用根本不应用。最值得注意的属性是宽度，高度、边距和填充。 .

虽然填充可以应用于内联元素的所有侧面，但只有左边距和右边距将对周围内容产生影响。

我的解决方案：将锚链接设置为 inline-block 。

优秀的文章 - 链接

JSfiddle 备份演示

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  padding: 5px;
  background-color: blue;
  color: white;
  display: inline-block;
}
#header {
  background-color: orange;
  height: 50px;
}
#nav {
  background: red;
}

<body>
  <div id="header"></div>
  <div id="nav">
    <a href="#">foo</a>
    <a href="/foo">foo</a>
  </div>
</body>

http://jsfiddle.net/whura34x/3/

您需要使锚点内联块

a {
    padding: 5px;
    background-color: blue;
    color: white;
    display:inline-block
}

没有

父元素的内联元素填充很奇怪:d

尝试使用锚点更改显示类型。

a{
    display:block;//you can also use inline-block without the float.
    float:left;
}

试试这个

    #header {
        background-color: orange;
        display: inline-block;
        height: 50px;
        width: 100%;
    }

相关内容

最新更新

热门标签：