我的导航栏无法响应。导航栏中的链接不断中断等。我正在使用 flexbox ......好吧也尝试但不确定问题是什么。
我网站上的其他一切都工作正常，但导航栏工作不正常。每当我尝试调整浏览器大小时，链接之间的距离会越来越近，但最终会断开连接，最后一个链接也会消失。我将在下面和 CodePen 上发布一个示例。
我一直在弄乱代码，试图弄清楚发生了什么，以及为什么它不能像我网站上的其他所有东西一样工作，但我已经走到了死胡同，Stack Overflow 似乎是我的最后一站-sadface- 感谢您提供任何信息!
CodePen - https://codepen.io/vCoCo/pen/NoYYRW
HTML
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<header>
<div class="container">
<ul>
<li><a href""><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
</ul>
</div>
</header>
CSS
/*** GLOBAL VARIABLE ***/
body{
background: #000;
}
.container{
max-width: 80%;
margin: auto;
overflow: hidden;
border: 2px solid white;
}
/*** GLOBAL ENDS **/
header{
max-width: 600px;
color: #fff;
padding-top: 20px;
border: 2px solid purple;
margin: 0 auto;
}
header ul{
list-style-type: none;
display: flex;
flex-direction: row;
border: 2px solid pink;
}
header li{
padding: 15px;
list-style: none;
margin: 0 auto;
}
ul li a{
text-decoration: none;
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
border-radius: 50%;
font-size: 30px;
}
ul li a:hover{
color: #fff;
}
最佳答案
我不确切知道你想要实现什么，但如果你想让所有元素在屏幕变小(而不是被切断)时可见，你可以使用 flex-wrap: wrap;属性。将它添加到您的 ul 中，如果屏幕太小，它将允许 flex 元素换行。
这是您提供的具有附加属性的代码笔 https://codepen.io/vCoCo/pen/NoYYRW
关于HTML/CSS 导航栏没有响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54621164/