CSS - 容器内的链接填充问题

Question

我buttons里面有一些container。这些按钮有一个，padding如您在image below。我需要容器不忽略填充。

我试过了box-sizing但没有成功。

这里有HTML代码：

<br />
<div style="background-color:#0f0;">
    <a href="#" class="button">EDIT CART</a> ......
    <a href="#" class="button">UPDATE</a> ......
    <a href="#" class="button">PROCEED TO CHECKOUT</a>
</div>

<br /><br /><br />

<div style="background-color:#0f0;width:200px;">
    <a href="#" class="button">EDIT CART</a> ......
    <a href="#" class="button">UPDATE</a> ......
    <a href="#" class="button">PROCEED TO CHECKOUT</a>
</div>

这里有CSS代码：

.button {
    color: #fff;
    background-color: #0778bd;
    font-family: "Tahoma";
    font-size: 25px;
    text-decoration: none;
    padding: 20px 25px;
}

这里有JSFiddle链接： https: //jsfiddle.net/ox6yzpfa/

关于如何解决这个问题有什么想法吗？如果您能正常工作，请给我一个JSFiddle已修复代码的链接。

Answer 1

a是内联元素，它不具有垂直布局，也不垂直影响 DOM 中的其他元素。要给予元素垂直布局，以便它可以垂直影响其周围的元素，请根据您的需要a创建元素display: block;或。display: inline-block;这是一个演示https://jsfiddle.net/ox6yzpfa/1/