水平导航栏中的 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

我并不完全清楚你想要实现什么，所以根据我对你的要求的解释，这里有两种可能性：

有左列和右列：

你可以使用 CSS3 Columns 只要你同意它回退到常规（非分栏）

ul

或polyfilling对于蹩脚的浏览器（咳咳<=IE9)

nav ul {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-width: 50%;
     -moz-column-width: 50%;
          column-width: 50%;
    -webkit-column-gap: 4em;
       -moz-column-gap: 4em;
            column-gap: 4em;
}

<nav>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
    </ul>
</nav>

参见：
http://caniuse.com/#feat=multicolumn
http://css-tricks.com/guide-responsive-friend-css-columns/

---

调整文本范围：

* {
    margin: 0;
    padding: 0;
}

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

header {

}

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

li {
    display: table-cell;
    padding: 0 1.5em;
    border-left: 2px solid #61f231;
    vertical-align:middle;
    text-align:center;
}

li.special_text {
    font-size: 2em;
    font-weight: bold;
    color: black;
    font-family: "Arial Black";
    text-align:left;
}
li.range_left {
    text-align:left;
}
li.range_right {
    text-align:right;
}

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

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

Answer 3

如果您的项目没有超过一行文本，您可以使用

line-height

设置垂直对齐方式。试试这个：

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

/*Remove the padding*/

检查这个演示小提琴

Answer 4

或者，您可以像这样添加填充：

li:first-child{padding-right: 150px;}

看我的小提琴

Answer 5

如果您使用的是 Bootstrap 5，您可以使用名为：

flex-row-reverse

的 css 类

这将显示从右到左对齐的导航栏项目。这是我发现的最好的方式，它也适用于较小的屏幕和移动浏览器。

示例代码：

<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between bg-warning">
<ul class="navbar-nav flex-grow-1 flex-row-reverse ">
    <li class="nav-item">
        <a class="nav-link text-light" asp-area="" asp-controller="About" asp-action="Index">About</a>
    </li>
    <li class="nav-item">
        <a class="nav-link text-light" asp-area="" asp-controller="Contact" asp-action="Index">Contact</a>
    </li>
</ul>