右对齐并左对齐水平导航栏中的ul li元素

Question

我正在为我的网站编写一个水平导航栏.html如下:

        <nav>
            <ul>
                <li class="special_text"><a href="#">Hello1</a></li>
                <li><a href="#">Hello2</a></li>
                <li><a href="#">Hello3</a></li>
            </ul>
        </nav>

css如下:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: white;
    margin: 15px auto;
    border: 1px solid black;
}

header {

}

ul {
    list-style: none;
    padding: 1em 0;
    border-bottom: 2px solid #61f231;
    border-top: 2px solid #61f231;
}

li {
    display: inline;
    padding: 0 1.5em;
    border-left: 2px solid #61f231;
}

li.special_text {
    font-size: 200%;
    font-weight: bold;
    color: black;
    font-family: "Arial Black";
}

li.special_text a {
    text-decoration: none;
}

我想让一些<li>元素左对齐,而其他元素对齐.当我尝试向左或向右浮动我想要的那些时,垂直对齐存在问题(元素不再在<ul>元素内垂直对齐).

部分问题源于第一个<li>元素使用不同大小的字体.

有什么建议？

谢谢

Answer 1

你需要做的就是在div和float它们中包装你想要的东西,left然后right:

<nav>
        <ul><div class="floatleft">
                <li class="special_text"><a href="#">Hello1</a></li>
            </div>
            <div class="floatright">
                <li><a href="#">Hello2</a></li>
                <li><a href="#">Hello3</a></li>
            </div>
        </ul>
</nav>

并添加到您的CSS:

.floatleft {
    float:left;
}
.floatright {
    float:right;
}

要解决垂直对齐问题,您需要line-height使用受影响的li元素

看看小提琴

Answer 2

如果您的项目没有超过一行文本，您可以使用它line-height来设置垂直对齐方式。尝试这个：

ul {
    list-style: none;
    border-bottom: 2px solid #61f231;
    border-top: 2px solid #61f231;
    line-height:2.5em;
}

/*Remove the padding*/

检查这个演示小提琴