html - 当列表等间距且居中时，如何使列表中的一个元素比其他元素高>

Question

我有一个页脚 nav，它有一个 ul 和几个 li。目前，导航固定在页面底部，li 均匀分布在页面底部。

我希望能够使其中一个 li 比其他所有的都高。然而，当我现在尝试这样做时，通过增加特定 li 元素的高度，它要么只是提高整个 nav 要么不会改变。有什么想法吗？

这是一个Fiddle

和我的代码:

HTML:

    <article class="main home">
        <img class="heroLogo" src="media/TM-Logo-4.png">
            <nav>
                <div class="menuIcon"></div>
                <ul>
                    <li><a href="http://www.google.com">About</a></li>
                    <li><a href="http://www.google.com">Sleep</a></li>
                    <li><a href="http://www.google.com">Test</a></li>
                    <li class="current"><div id="tm">CHANGE MY HEIGHT</div></li>
                    <li><a href="http://www.google.com">Relax</a></li>
                    <li><a href="http://www.google.com">Play</a></li>
                    <li><a href="http://www.google.com">Party</a></li>
                </ul>
            </nav>
    </article>

CSS:

nav {
    width: 100%; 
    position: fixed; 
    left: 0; 
    bottom: 0; 
    font-size: .7em;
}

nav ul, nav:hover ul {
    display: block;
    background-color: transparent;
    text-align: center
    left: 0;
    bottom: 0;
    margin: 0 auto;
    width: 100%;
    padding: 0 auto;
    top: auto;
    line-height: 2.5em;
    background-color: #FBF6F1;
    padding: 8px;
}

nav li, .current {
    display: inline-block; 
    width: 12.5%; 
    padding: 0;
    margin: 0;
}

nav li:nth-child(odd) {
    border-left-color: #9AD5E6;
    border-right-color: #9AD5E6;
    border-left-width: 3px;
    border-right-width: 3px;
    border-left-style: solid;
    border-right-style: solid; 
}

a {
    padding-bottom: 8px;
}

a:hover {
    color: #9AD5E6;
    border-bottom-width: 3px;
    border-bottom-style: solid; 
}

.current {
    height:2em;  /* Doesn't change anything */
}

Answer 1

是的，这就是列表项的显示方式。您可以使用其他方法来重现所需的效果，例如添加一些填充:

nav li.current {
    padding-top:2em;
}

http://jsfiddle.net/x3mqgoq4/

或者保持文本垂直对齐...

nav li.current {
    padding:2em 0;
    position : relative;
    top : -2em;
}

http://jsfiddle.net/x3mqgoq4/1/