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

时间:2014-09-04 10:07:32

标签: css

这是标准的CSS行为吗?

enter image description here

如何让容器环绕按钮?

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>

4 个答案:

答案 0 :(得分:4)

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

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

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

答案 1 :(得分:1)

添加

display: block;

到.button

答案 2 :(得分:1)

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

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

新HTML:

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

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

答案 3 :(得分:1)

尝试添加

 display: block;
按照建议

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

body {
    padding: 20px;
}

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

.test {
    border: 1px solid black;
}