填充鏈接在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外

回答

相關問題