我正在为我的网站编写一个水平导航栏.
html如下： @H_404_3@<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>
html如下： @H_404_3@<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如下：
@H_404_3@* { 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>的事实. element使用不同大小的字体.
有什么建议？
谢谢
解决方法
你需要做的就是在div中包装你想要的东西并左右浮动它们：
@H_404_3@<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：
@H_404_3@.floatleft { float:left; } .floatright { float:right; }要解决垂直对齐问题,您需要使用受影响的li元素来处理行高
