如何讓包裝包含鏈接文本？

我正在故意將我的鏈接文本推到其包含的下方<div class="box">如何讓包裝包含鏈接文本？

問題是wrapper不包含鏈接文本。我如何獲得它包含所述文本？

<div id="wrapper"> 
    <div class="box lowest"><a href="#">Home</a></div> 
    <div class="box medium"><a href="#">About</a></div> 
    <div class="box"><a href="#">Products</a></div> 
    <div class="box medium"><a href="#">Services</a></div> 
    <div class="box lowest"><a href="#">Contact</a></div> 
</div>

#wrapper{ 
    width: 600px; 
    margin: 0 auto; 
    text-align: center; 
    border: solid 1px green; 
    position:relative; 
    white-space: nowrap; 
    letter-spacing: 15px; 

} 

.box a{ 
    padding-top: 105px; 
    display: block; 
} 

.box{ 
    width:75px; 
    height: 100px; 
    background-color:red; 
    border: solid 1px black; 
    display: inline-block; 
    vertical-align: top; 
    letter-spacing: normal; 
} 

.lowest{ 
    margin-top:50px; 
} 

.medium{ 
    margin-top:25px;    
}

截圖

enter image description here

來源

2012-03-14 Chase Florell

要#wrapper指定，添加：

padding-bottom: 30px;

來源

2012-03-14 17:57:16

+1這是一個很好的方式來強制它在這些較低的鏈接，但如果這些鏈接分佈在兩條線上會發生什麼？我希望能夠圍繞基於內部內容的內容封裝包裝，而不是將其推送到一組px。 – 2012-03-14 18:01:51

「white-space：nowrap;」阻止他們去兩條線。拿出來，再添加幾個塊，你會發現padding-bottom仍然可以正常工作。 – 2012-03-14 18:06:58

很酷，謝謝。我會這樣做的。 – 2012-03-14 18:10:41

這裏的問題是，您已經爲您的.box div設置了特定的高度，並通過105px的填充來推動您的錨標記。這增加了你的div的大小，高度被設置爲100px，包裝仍然認爲你的div是100px高。

要麼設置appropirate高度與box DIV（與紅色BG 加填充和錨定標記的高度的div高度），或者使用簡單地使用min-height代替height。

來源

2012-03-14 18:17:20 Krazer

+1很好的解釋。 – steveax 2012-03-15 21:43:03

如何讓包裝包含鏈接文本？

回答

相關問題