填充链接在div外

我有这个JsFiddle，我不知道为什么按钮扩展到div之外。填充链接在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>

来源

2013-10-10 Get Off My Lawn

您可以指定的按钮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

来源

2013-10-10 01:32:42 PSL

但我想的按钮看起来像 –

@RyanNaddy更新了答案。 – PSL

太棒了！那工作完美！ –

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/

来源

2013-10-10 01:38:14

嘿希望这对你的作品： -

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

来源

2013-10-10 01:40:26

填充链接在div外

回答

相关问题