css如何在其他导航栏下添加一个导航栏

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

将您的 css 替换为此代码

    .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
}

然后添加您想要的样式。

此代码仅按照您想要的方式定位导航。

Answer 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>

你的评论：

the first bar home alignment with the second bar home

使用 display:flex 到 main 并使用 margin-top: 57px; 到第二个：https://jsfiddle.net/tq27n1xg/17/

css如何在其他导航栏下添加一个导航栏

css how to add a navigation bar under other navigation bar

html

css

navigationbar