Question

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

我希望能够制作li之一，比其他所有人都高。但是，当我尝试现在这样做时，通过增加特定li元素的高度，它只是提升整个nav或不改变。有什么想法吗？

和我的代码：

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/

Answer 2

例如，如果导航的高度是60px，当前的li高度高度是65

做类似的事情：

<强>导航

height: 65px; /* Its original height plus 5 */

导航李正常

height: 60px; /* leaving 5px room for height increment */

导航当前

height: 605px; /*  Normal state height plus 5 and there wont be a problem */

当列表等间距且中心＆gt;时，如何使列表中的一个元素高于其他元素。

2 个答案: