我尝试将两个导航栏相互放置,但是在将第二个导航栏相对于第一个导航栏对齐时遇到了困难。我不太明白为什么第二个导航栏不能正确浮动。
以下是我的HTML和CSS代码。
.header_nav1 {
display: block;
float: right;
color: #000;
font-family: verdana;
text-transform: uppercase;
max-width: 1024px;
}
.header_nav1 ul li {
padding-top: 10px;
padding-right: 10px;
list-style-type: none;
display: inline;
}
.header_nav2 {
display: block;
padding: 50px;
}
.header_nav2 ul li {
display: inline;
list-style-type: none;
float: right;
padding-right: 15px;
max-width: 1024px;
}
<header class="header_navigation">
<div class="container">
<nav class="header_nav1">
<ul>
<li><a href="/contact/">Contact</a></li>
<li><a href="/search/">Search</a></li>
</ul>
</nav>
<nav class="header_nav2">
<ul>
<li><a href="/investors/">INVESTORS</a></li>
<li><a href="/career/">CAREER</a></li>
<li><a href="/our portfolio/">OUR PORTFOLIO</a></li>
<li><a href="/solutions/">RETAIL SOLUTIONS</a></li>
</ul>
</nav>
</div>
</header>
谢谢。
最佳答案
我发现这是由容器类引起的。
您可以删除容器,也可以将float: right
更改为display: inline-block