如何让Wrapper包含链接文本？

Question

我故意将我的链接文字推送到包含<div class="box">

的下方

问题是wrapper不包含链接文字。如何让它包含所述文本？

Here's the fiddle.

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

截图

Answer 1

要#wrapper，请添加：

padding-bottom: 30px;

Answer 2

这里的问题是你已经为你的.box div设置了一个特定的高度，并用105px的填充推动你的锚标签。这增加了你的div的大小，高度设置固定在100px，包装仍然认为你的div是100px高。

将适当的高度设置为box div（div的高度，红色bg 加上填充和锚标记的高度）或使用{{1而不是min-height。