如何使此导航栏响应？答案

【问题标题】：How do I make this navigation bar responsive?如何使此导航栏响应？
【发布时间】：2019-08-28 19:00:57
【问题描述】：

我想制作一个导航栏，其徽标为六边形，3 个“按钮”对齐，如截图所示https://prnt.sc/n8nm3q

我设法在全屏 (1920x1080) 上按照我想要的方式对齐它们，但由于我的网站必须响应，我不知道如何使这个导航栏保持对齐（列表中元素之间的空格和中心六边形位于导航栏的底线） https://jsfiddle.net/j6wLpq1o/

我也尝试在列表中创建一个列表，但它并没有像我想象的那样工作 https://jsfiddle.net/53nLqvfp/

    <div id=navigationbar>
    <ul id="logonav">
        <li><a id="logo" class="active" href="#home"><img id="logoimg" src="https://i.imgur.com/pX2h0gT.png"/></a></li>
    <ul id="nav">
        <li class="nav"><a href="#news">Attractions</a></li>
        <li class="nav"><a href="#contact">Shop</a></li>
        <li class="nav"><a href="#about">Contact us</a></li>
    </ul>
    </ul>
</div>

css

 #navigationbar ul{
    display: inline-block;
}

#logonav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    width: 100%;
    z-index: 1;
    margin-left:25vw;

}
#logonav ul{
display: inline-block;

}
#logonav ul li{
display: inline-block;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    width: 100%;
    text-align:left;
    z-index: 1;
}

li {
    float: none;
    display: inline-block;

}

li a {
    display: block;
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 14px 4vw;
    border-right: 1px solid red;
}

li a:hover{
    background-color: #111;
}

#logo {
    margin-top: 2vh;
    padding-right: 15px;
    border:0px;

}

#logoimg {
    width: 8vw;
    height: auto;
}
#nav{
    margin-top: 15px;
}

感谢您的宝贵时间。

【问题讨论】：

标签： html css navbar responsive positioning

【解决方案1】：

您似乎正在使用 display: inline-block。您可以使用它，但它需要大量的媒体查询才能到达您希望您的项目有时响应的位置。

尝试使用 flexbox 代替 - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：