[英]Right align and left align ul li elements in horizontal navigation bar
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. 我希望将一些
<li>
元素左对齐,而其他元素对齐。 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. 当我尝试向左或向右浮动我想要的那些时,垂直对齐存在问题(元素不再在
<ul>
元素内垂直对齐。
Part of the problem arises from the fact that the first <li>
element uses a different size font. 部分问题源于第一个
<li>
元素使用不同大小的字体。
Any suggestions? 有什么建议?
Thank you 谢谢
All you need to do is wrap what you want in divs and float
them left
and 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-height
with the affected li
elements 要解决垂直对齐问题,您需要使用受影响的
li
元素来处理line-height
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: 我并不完全清楚你想要达到的目标,所以根据我对你的要求的解释,这里有两种可能性:
You could use CSS3 Columns so long as you're okay with it falling-back to a regular (non-columned) ul
or polyfilling for crappy browsers (ahem <=IE9) 您可以使用CSS3列 ,只要您可以使用它回到常规(非柱状)
ul
或填充糟糕的浏览器(ahem <= 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://caniuse.com/#feat=multicolumn
http://css-tricks.com/guide-responsive-friendly-css-columns/ 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>
If your items will not have more than one line of text you can use line-height
to set the vertical algnment. 如果您的项目不会有多行文本,则可以使用
line-height
设置垂直标注。 Try this: 尝试这个:
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 检查这个演示小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.