在水平导航栏中，将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样式：

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;
}

我想让一些

元素左对齐，而另一些右对齐。 当我尝试浮动想要左对齐或右对齐的元素时，会出现垂直对齐问题(元素不再在

元素内垂直对齐)。

问题的一部分源于第一个
• 元素使用了不同大小的字体。
  
  有什么建议吗？
  
  谢谢

- theyuv

---

我不太清楚您所说的左对齐或右对齐是什么意思。通过将它们向左或向右浮动，似乎您正在尝试拥有两列，但随后又提到垂直对齐方式错误，这让我想到您只想调整li的文本对齐方式（text-align）。也许您可以澄清一下您所需的输出应该是什么样子？ - Moob

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

查看示例

- starvator

---

谢谢。这似乎是一个不错的解决方案。 你能解释一下你是如何选择30作为高度和行高属性值的吗？ 我读了一些关于这些属性的资料，但仍然不明白为什么这些值是适当的。 另外，我应该预料到这些值是像素而不是百分比或相对单位会出现问题吗？ 谢谢。 - theyuv

<ul>内部的<div>是无效的。 - Majid

starvator....采用元素滥用的方法。虽然大多数环境都会抗议，但这是一种将连续控制分隔到各自侧面的有效方式。 - GoldBishop

@MajidRahimi 有时你不得不打破既定规则来实现简单的解决方案。要超越 display:box 的限制，多考虑一下 display:flex。 - GoldBishop

Answer 2

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

左右两栏布局：

你可以使用CSS3 Columns，只要你可以接受它在低版本浏览器（比如IE9及以下）中回退到常规（非多列）ul或多列布局插件。

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-friendly-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>

- Moob

---

虽然从技术上讲是正确的，但父子嵌套实现起来过于复杂。 - GoldBishop

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*/

请查看此 Demo Fiddle。这与编程有关。

- DaniP

---

这取决于他所说的“元素不再在<ul>元素内垂直对齐”的意思。在ul上更改行高将使其垂直居中，在li上更改将使文本基线对齐。 - starvator

Answer 4

或者你可以像这样添加内边距：li:first-child{padding-right: 150px;}

请查看我的fiddle

- Edwin