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

Right align and left align ul li elements in horizontal navigation bar

提问by theyuv

I am coding a horizontal navigation bar for my site. The html is as follows:

我正在为我的网站编写一个水平导航栏。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>

The css is as follows:

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

I would like to have some <li>elements aligned left while others align right. When I try to float the ones that I want left or right there is a problem with the vertical alignment (the elements are no longer vertically aligned within the <ul>element.

我想让一些<li>元素左对齐，而另一些元素右对齐。当我尝试向左或向右浮动我想要的那些时，垂直对齐会出现问题（元素不再在<ul>元素内垂直对齐。

Part of the problem arises from the fact that the first <li>element uses a different size font.

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

Any suggestions?

有什么建议？

Thank you

谢谢

回答by starvator

All you need to do is wrap what you want in divs and floatthem leftand right:

您需要做的就是将您想要的内容包装在 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>

and add to your css:

并添加到您的 css：

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

To fix the issue with vertical aligning, you need to mess around with line-heightwith the affected lielements

要解决垂直对齐的问题，您需要处理line-height受影响的li元素

Check out the fiddle

检查小提琴

回答by Moob

It's not entirely clear to me what you are trying to achieve so here are two possibilities based on my interpretation(s) of your requirements:

我并不完全清楚您要实现的目标，因此根据我对您的要求的解释，这里有两种可能性：

To Have Left and Right Columns:

有左列和右列：

You could use CSS3 Columnsso long as you're okay with it falling-back to a regular (non-columned) ulor polyfillingfor crappy browsers (ahem <=IE9)

你可以使用CSS3列，只要你没事吧回落到一个常规（非圆柱的）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>

See:
http://caniuse.com/#feat=multicolumn
http://css-tricks.com/guide-responsive-friendly-css-columns/

请参阅：
http: //caniuse.com/#feat=multicolumn
http://css-tricks.com/guide-responsive-friendly-css-columns/

---

---

To Range The Text:

范围文本：

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

回答by DaniP

If your items will not have more than one line of text you can use line-heightto set the vertical algnment. Try this:

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

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

/*Remove the padding*/

Check this Demo Fiddle

检查这个演示小提琴

回答by Edwin

Alternatively you can add padding like this: li:first-child{padding-right: 150px;}

或者，您可以像这样添加填充： li:first-child{padding-right: 150px;}

See my fiddle

看我的小提琴