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