css - 填充链接在 div 之外

Question

我有这个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>

Answer 1

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

.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