Question

我想要像WikiHow这样的导航栏，顶部有一个图标，下面有文字。我一直在看他们的代码，但它看起来非常混乱，我认为有更简单的方法来做到这一点。

CSS

nav ul li{
    border-left: 1px solid red;
    height: 80px;
    position: relative;
    display: inline-block;
    width: 70px;
} 

.nav_icon{
    margin-top: 15px;
    background: url('inc/icon.png');
}

HTML

<nav>
     <ul>
        <li><div class="nav_icon"></div>HOME</li>
        <li>PICTURES</li>
        <li>ABOUT</li>
    </ul>   
</nav>

然后我在第一个<div>元素中的“HOME”之前创建了一个<li>。我在div上添加了一些padding-top: 15px;以使其略微下降，但会影响整个<li>元素。我只想让图标从顶部获得一些余量......

http://jsfiddle.net/JmZbG/1/

Answer 1

默认情况下，内联块将根据其文本基线进行对齐。

只需将vertical-align: top;添加到nav ul li的CSS即可让它们按照其上边缘对齐。

Answer 2

这是我的版本：http://jsfiddle.net/JmZbG/2/

以下是对这些变化的解释：

nav ul li {
    border-left: 1px solid red;
    height: 80px;
    line-height: 80px; /* Center the labels vertically */
    float: left; /* Another way of lining up the <li>s horizontally */ 
    display: inline-block;
}

.nav_icon {
    display: inline-block; /* Needs to be an inline-block to be inline with the text */
    vertical-align: middle; /* This centers the image vertically in it's <li> */
    width: 46px; /* Need to define a size for an empty <div>... */
    height: 41px; /* ...in order to see the background image */
    background-image: url("http://i.imgur.com/mDXvZOZ.jpg");
}

如何制作像WikiHow这样的导航栏？

2 个答案: