Question

我想在第一个导航栏下创建另一个导航栏，但是如何更改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边距，但是它不起作用，它会奇怪地移动而不是水平和垂直，会倾斜移动。

Answer 1

您可以使用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/

Answer 2

尝试使用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
}

，然后添加所需的样式。

此代码仅按所需的方式定位导航。

CSS如何在其他导航栏下添加导航栏

2 个答案: