Панель навигации HTML / CSS не отвечает - PullRequest
Новая
       24

Панель навигации HTML / CSS не отвечает

0 голосов
/ 11 февраля 2019

У меня проблемы с отзывчивостью панели навигации.Ссылки внутри панели навигации постоянно вырываются и т. Д. Я использую flexbox ... Хорошо, но тоже пытаюсь понять, в чем проблема.

Все остальное на моем сайте работает нормально, но навигационная панель не работает должным образом.Всякий раз, когда я пытаюсь изменить размер браузера, ссылки становятся ближе друг к другу, но в конечном итоге вырываются, а затем последняя ссылка исчезает.Я опубликую пример ниже, а также на CodePen.

Я возился с кодом, пытаясь выяснить, что происходит и почему он не работает, так как все остальное на моем сайте, но язашел в тупик, и переполнение стека, похоже, является моей последней остановкой -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;
}

Ответы [ 2 ]

0 голосов
/ 11 февраля 2019

Я думаю, что ваша проблема проистекает из того факта, что вы не удалили отступы по умолчанию: 

header ul{
  padding: 0;
}

Если вы хотите, чтобы все они были на своей линии, вы можете добавить flex wrap, как предложил newbiedudeили измените flex-direction на столбец.В зависимости от желаемого выхода.Дайте мне знать, как это происходит.

0 голосов
/ 11 февраля 2019

Я не знаю точно, чего вы хотите достичь, но если вы хотите, чтобы все элементы были видны, когда экран становится меньше (и не обрезается), вы можете использовать свойство flex-wrap: wrap;.Добавьте его к вашему ul, и он позволит обернуть гибкие элементы в новую строку, если экран станет слишком маленьким.

Это предоставленная вами кодовая ручка с дополнительным свойством https://codepen.io/vCoCo/pen/NoYYRW

...