我想在第一个导航栏下创建另一个导航栏,但是如何更改CSS来实现我想要的功能却没有用?
这是我的CSS编码
.firstnav
{
float:left;
list-style-type: none;
margin-top:50px;
margin-left:80px;
}
.secondnav
{
float:left;
list-style-type: none;
margin-top: 90px;
margin-right: 80px;
}
ul li
{
display: inline-block;
}
ul li a
{
text-decoration:none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover
{
background-color: #fff;
color:#000;
}
ul li .active a
{
background-color: #fff;
color: #000;
}
.logo img
{
float: left;
width: 150px;
height: auto;
margin-top: 20px;
}
.main
{
max-width: 1500px;
margin: auto;
}
这是我的html编码
<body>
<header>
<div class="main">
<ul class="firstnav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="secondnav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
我已经尝试了很多方法来解决此问题,但是仍然存在问题,我尝试更改.secondnav边距,但是它不起作用,它会奇怪地移动而不是水平和垂直,会倾斜移动。
答案 0 :(得分:2)
您可以使用display:flex
到firstnav/secondnav
代替inline-block
并将justify-content: flex-end;
设置为secondnav
到float right
请参见下面的代码并进行标记:https://jsfiddle.net/tq27n1xg/5/
body {
background: black;
}
.firstnav
{
padding-left: 0;
display:flex;
list-style-type: none;
margin-top:50px;
}
.secondnav
{
display:flex;
list-style-type: none;
margin-top: 30px;
justify-content: flex-end;
}
ul li a
{
text-decoration:none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover
{
background-color: #fff;
color:#000;
}
ul li .active a
{
background-color: #fff;
color: #000;
}
.logo img
{
float: left;
width: 150px;
height: auto;
margin-top: 20px;
}
.main
{
max-width: 1500px;
margin: auto;
}
<body>
<header>
<div class="main">
<ul class="firstnav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="secondnav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
您的评论:
第一个吧台原点与第二个吧台原点对齐
使用display:flex
到main
,然后使用margin-top: 57px;
秒:https://jsfiddle.net/tq27n1xg/17/
答案 1 :(得分:0)
尝试使用display:flex
将此代码替换为
.main{
display: flex;
flex-direction: column;
}
.firstnav{
display: flex;
flex-direction: row;
justify-content: space-around
}
.secondnav{
display: flex;
flex-direction: row;
justify-content: space-around
}
,然后添加所需的样式。
此代码仅按所需的方式定位导航。