Question

我的导航栏无法响应。导航栏中的链接不断出现中断。我正在使用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;
}

Answer 1

我不确定您要实现的目标，但是如果您希望在屏幕变小（而不是被截断）时使所有元素可见，则可以使用flex-wrap: wrap;属性。将其添加到您的ul中，如果屏幕太小，它将允许弹性项目换行。

这是您提供的带有附加属性的代码笔 https://codepen.io/vCoCo/pen/NoYYRW

Answer 2

我认为您的问题源于您尚未删除默认填充的事实：

header ul{
  padding: 0;
}

如果您希望它们全部位于自己的行上，则可以按照newbiedude的建议添加flex wrap或将flex-direction更改为column。取决于您所需的输出。让我知道怎么回事。

HTML / CSS导航栏没有响应

2 个答案: