感谢所有在我的第一个元素中帮助过我的人。
我已经成功地制作了这个响应式导航栏
1.然而，当移动菜单处于事件状态时，“汉堡”按钮会卡在左侧且较小。
- 我尝试制作子菜单但没有成功。
3.我有一个 Logo ，我希望它与导航菜单位于同一行，但是当媒体位于移动设备(480 像素)上时，我试图将 Logo 放在顶部和中间，将导航放在下面一行。
任何帮助都会很棒。提前谢谢你。
这是我的 jsfiddle 的链接 https://jsfiddle.net/jkfb4Lus/
<body>
<div id="container">
<header id="header">
<ul class="topnav" id="myTopnav">
<li><a href="#Home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Writings">Writings</a></li>
<li><a href="#Extra">Extra</a></li>
<li><a href="#Contact Us">Contact Us</a></li>
<li class="icon"><a id="button" href="javascript:void(0);" onclick="myFunction()">☰</a></li>
</ul>
</header>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</div>
</body>
body{
margin:0;
padding:0;
}
*{
margin:0;
padding:0;
}
#header{
width:100%;
height:65px;
background-color:white;
}
/*remove margins and padding from the LIST, and add a black background color*/
ul.topnav{
width:100%;
height:65px;
float:right;
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
text-align:right;
}
/*float the LIST (li) items side by side*/
ul.topnav li{
display:inline;
}
/*float the LIST (li) items side by side HOVER*/
ul.topnav li:hover{
border-bottom:;
}
/*style the (a)links inside the LI items*/
ul.topnav li a{
position:relative;
display:inline-block; /* so it accepts top/bottom padding */
text-decoration:none;
padding:px;
color:#FFF;
font-weight:500;
width:75px;
text-align:center;
line-height:65px;
width:100px;
}
/*change backround color of the LINKS (a) on hover*/
ul.topnav li a:hover{
background-color:#F1CBFF;
color:purple;
transition:background-color 1.0s ease;
}
/*hide the list (li) items that contains the link that
should open and close-quotethe topnav on small screens*/
ul.topnav li.icon{
display:none;
}
/*when the screen is less than 680px hide,hide all list (li)items,
except the first one("Home"). Show the list(li) item that contains
the link (a) open and close the topnav (li.icon)*/
@media screen and (max-width:680px){
#header{
height:auto;
}
/*remove margins and padding from the LIST, and add a black background color*/
ul.topnav{
height:auto;
}
ul.topnav li:not(:first-child){
display:none;
}
ul.topnav li.icon{
float:right;
display:inline-block;
}
/*float the LIST (li) items side by side*/
ul.topnav li{
float:left;
}
}
/*the "responsive" class is added to the topnav with Javascript when the uses
clicks on the (icon). This class makes the topnav look good on small screens*/
@media screen and (max-width:680px){
ul.topnav.responsive {
position:relative;
}
ul.topnav.responsive li.icon{
position:absolute;
right:0;
top:0;
}
ul.topnav.responsive li {
float:none;
display:inline;
}
ul.topnav.responsive li a{
width:100%;
display:block;
text-align:center;
padding:10px;
}
ul.topnav li a:hover{
border-bottom:1px purple solid;
transition:all 1.0s ease;
}
}
最佳答案
你试过使用 flexbox 吗？
ul.topnav.responsive li.icon{
display: flex;
align-items: center;
}
关于html - 移动导航栏问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41049673/