CSS

Question

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

我已经尝试 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 link: https://jsfiddle.net/ox6yzpfa/

知道如何解决这个问题吗？请，如果你让它工作，请还我一个 JSFiddle link，代码已修复。

Answer 1

默认情况下，锚标签是 inline 元素并且没有框模型。您需要将 display 设置为 inline-block:

.button {
  color: #fff;
  background-color: #0778bd;
  font-family: "Tahoma";
  font-size: 25px;
  text-decoration: none;
  padding: 20px 25px;
  display: inline-block;         /* Add this! */
}

Fiddle: https://jsfiddle.net/u37Ljn3g/

Answer 2

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

Answer 3

您正在尝试将内边距分配给内联元素，试试这个：

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

CSS - link 容器内填充问题

CSS - Issue with link padding inside container

html

stylesheet