我正在执行标题导航栏,并且向左浮动的项目比向右浮动的项目具有更大的字体大小。您可能会在代码运行中看到的问题是,字体大小较小的项目与字体大小较大的项目无法v对齐
我已经尝试了几个小时,但是没有运气,这可能是什么问题?
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
header {
background-color: black;
}
header ul {
padding: 0;
margin: 0;
list-style: none;
background-color: black;
overflow: hidden;
}
header ul li {
display: inline-block;
box-sizing: border-box;
}
header ul li a {
display: block;
color: white;
text-decoration: none;
padding: 20px 20px;
box-sizing: border-box;
}
#logo {
float: left;
}
#logo a {
font-size: 22px;
display: block;
}
.navitem {
float: right;
}
<header>
<ul>
<li id="logo"><a id="first" href="#">Relax</a></li>
<li class="navitem"><a href="#">Testing</a></li>
<li class="navitem"><a href="#">Testing</a></li>
<li class="navitem"><a href="#">Testing</a></li>
<li class="navitem"><a href="#">Testing</a></li>
<li class="navitem"><a href="#">Testing</a></li>
</ul>
</header>
答案 0 :(得分:0)
渲染这样的导航可能有点笨拙,因为您需要在HTML中以相反的顺序将它们导航,然后使用浮点数来反转它们的渲染方式(尝试使每个唯一的文本中的文字都明白我的意思) )。
更多语义,使用Flexbox将是:
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
header {
background-color: black;
}
header ul {
padding: 0;
margin: 0;
list-style: none;
background-color: black;
overflow: hidden;
display: flex;
align-items: center;
}
header ul li {
box-sizing: border-box;
}
header ul li a {
display: block;
color: white;
text-decoration: none;
padding: 20px 20px;
box-sizing: border-box;
}
#logo {
flex-grow: 1;
}
#logo a {
font-size: 22px;
display: block;
}
<header>
<ul>
<li id="logo"><a id="first" href="#">Relax</a></li>
<li class="navitem"><a href="#">Testing 1</a></li>
<li class="navitem"><a href="#">Testing 2 </a></li>
<li class="navitem"><a href="#">Testing 3</a></li>
<li class="navitem"><a href="#">Testing 4</a></li>
<li class="navitem"><a href="#">Testing 5</a></li>
</ul>
</header>