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 会展开以完全容纳锚点。

.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;
}

小提琴

Answer 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/

Answer 3

嘿希望这对你有用：-

演示

<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;
  }