[英]How do I make this navigation bar responsive?
我想制作一個導航欄,該導航欄具有六邊形形狀的徽標和三個“按鈕”對齊,如此屏幕快照所示: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;
}
感謝您的時間。
看來您在使用display:inline-block。 您可以使用它,但是需要花費大量媒體查詢才能到達您希望項目有時響應的位置。
嘗試改用flexbox- https: //css-tricks.com/snippets/css/a-guide-to-flexbox/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.