如何使一个navbar像WikiHow？

问题描述：

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

I would like a navbar like WikiHow with a icon on top and text beneath. I have been taking a look at their code but it seems pretty messy and I think there is easier ways to do it.

CSS p>

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> 元素。我把一些 padding-top：15px; 放在div上，使它下降一点，但影响整个< li> 元素。我只想让图标从顶部获得一些边距...

Then I created a <div> that I inserted before "HOME" in the first <li> element. I put some padding-top: 15px; on the div to make it go down a bit, but affects the whole <li> elements. I just want the icon to get some margin from the top...

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

答

a href =http://jsfiddle.net/JmZbG/2/ =nofollow> http://jsfiddle.net/JmZbG/2/

Here's my version: 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");
}

如何使一个navbar像WikiHow？

相关推荐