这是标准行为吗？ Div流出容器

Question

这是标准的CSS行为吗？

如何让容器环绕按钮？

http://jsfiddle.net/frank_o/yepw7oLw/

CSS：

.button {
    background: grey;
    padding: 10px 20px;
}
.test {
    border: 1px solid black;
}

HTML：

<div class="test">
    <a class="button">Test</a>
</div>

Answer 1

这是因为您的a.button元素当前显示为inline。应用于Margin元素顶部和底部的Padding和inline值不会影响其周围的元素，因为浏览器不想影响流量。< / p>

要解决此问题，请将display: inline-block添加到a.button元素。

这会强制浏览器将其视为有关样式的所有规则block，并将其视为inline以便在页面上放置。

Answer 2

添加

display: block;

到.button

Answer 3

通常我不建议在锚<a>标记中添加填充。

将填充和其他样式添加到<div>，而锚点包含该div： JSFiddle

新HTML：

<div class="test">
    <a href='#'>
        <div class='button'>Test</div>
    </a>
</div>

编辑：在我上面的JSFiddle示例中，灰色按钮的宽度默认为容器的100％，但如果需要，可以通过向.test div添加宽度值来更改此值。

Answer 4

尝试添加

 display: block;

按照建议

并为按钮添加宽度，使其不是div的全长，例如：

body {
    padding: 20px;
}

.button {
    display: block;
    width: 4%;
    background: grey;
    padding: 10px 20px;
}

.test {
    border: 1px solid black;
}