Question

我制作了以下非常简单的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>

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

Answer 1

如果您尝试将维度添加到内联元素，则会有一些属性   应用时，某些属性将被部分应用，其他属性将被应用   根本不适用。最值得注意的属性是宽度，   高度，边距和填充。

虽然填充只能应用于内联元素的所有边   左右填充将对周围内容产生影响。

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

Excellent Article - Link

JSfiddle Backup Demo

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

Answer 2

试试这个

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

Answer 3

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

你需要制作锚内联块

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

}

Answer 4

使用没有父项的内联元素填充是很奇怪的：d

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

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

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

4 个答案: