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

<强> Fiddle

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

嘿希望这适合你： -

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

填充链接在div之外

3 个答案: