填充链接在 div 之外答案

【问题标题】：Padded links are outside of div填充链接在 div 之外
【发布时间】：2026-02-20 18:40:01
【问题描述】：

我有这个JsFiddle，但我不明白为什么按钮会延伸到 div 之外。

我怎样才能让它们出现在 div 中？

这里是 CSS

.btn-link {
    font-variant: small-caps;
    text-decoration: none;
    font-size: 1.2em;
    padding: 8px 15px 12px 15px;
    border-radius: 3px;
    background-color: #7dc36b;
    color: #ffffff;
}
div.left-nav {
    float: left;
    width: 200px;
}
div.left-nav > div {
    clear: both;
    width: 100%;
    border: solid 1px red;
}

这里是 HTML：

<div class="left-nav">
    <div><a href="" class="btn-link">new story</a>
    </div>
    <div><a href="" class="btn-link">My Stories</a>
    </div>
</div>

【问题讨论】：

标签： css padding

【解决方案1】：

您可以在按钮上指定display:inline-block;，这样 div 就会展开以完全容纳锚点。

.btn-link {
  font-variant: small-caps;
  text-decoration: none;
  font-size: 1.2em;
  padding: 8px 15px 12px 15px;
  border-radius: 3px;
  background-color: #7dc36b;
  color: #ffffff;
  display:inline-block;
}

Fiddle

【讨论】：

但我希望按钮看起来像这样
@RyanNaddy 更新了答案。

【解决方案2】：

div.left-nav > div {
    overflow: auto; /* removed clear: both; */
    width: 100%;
    border: solid 1px red;
}

div.left-nav > div > a {
    display: inline-block;
}

http://jsfiddle.net/ZjvZu/10/

【讨论】：

【解决方案3】：

嘿希望这对你有用：-

demo

<div class="left-nav">
<div class="btn"><a href="" class="btn-link">new story</a>
</div>
<div class="btn"><a href="" class="btn-link">My Stories</a>
</div>

CSS：-

.btn-link {
font-variant: small-caps;
text-decoration: none;
font-size: 1.2em;
padding: 8px 15px 8px 15px;
border-radius: 3px;
background-color: #7dc36b;
color: #ffffff;
}
div.left-nav {
   float: left;
   width: 200px;

}
div.left-nav > div {
  clear: both;
  width: 100%;
  border: solid 1px red;
  }
.btn{
 padding:8px 15px 8px 15px;
  }

【讨论】：