Адаптивный CSS - строки под логотипом

#html #css #responsive

#HTML #css #адаптивный

Вопрос:

У меня возникли некоторые проблемы с линиями, проходящими под / за моим логотипом на небольших экранах / мобильных устройствах. Между строками и логотипом должно быть x% пространства, но когда экран становится меньше, строка проходит за логотипом. (Вы можете попробовать изменить ширину предварительного просмотра скрипки.)

 header {
  max-width: 100%;
  height: 225px;
  background-color: #000;
}
.logo {
  position: relative;
  top: -10px;
}
.line {
  width: 100%;
  height: 2px;
  position: fixed;
  top: 80px;
  text-align: center;
}
.line span {
  display: inline-block;
  position: relative;
  width: 50%;
}
.line span:before,
.line span:after {
  content: "";
  position: absolute;
  height: 3px;
  background-color: #FFF;
}
.line span:before {
  right: 60%;
  width: 80%;
  margin-right: 5%;
}
.line span:after {
  left: 60%;
  width: 80%;
  margin-left: 5%;
}

 <header>
  <div class="line">
    <span>
          <a href="#"><img class="logo" src="http://i.imgur.com/cPe20kT.png"></a>
        </span>
  </div>
</header>

Просмотр на скрипке

Примечание: черный фон — это всего лишь пример, реальный фон НЕ черный.

1. иногда x% даже возникают некоторые проблемы с адаптивностью.. я поделюсь с вами альтернативным способом сделать это 🙂

2. «x% пространства между строками и логотипом». x% от какого пространства? Это процент от ширины логотипа, ширины экрана или ширины строки? Ваше процентное значение должно быть «от чего-то», чтобы логически работать, и пока эта информация не известна, адекватное решение трудно обеспечить.

Ответ №1:

Используйте a flexbox , и все становится намного проще:

Удалите absolute расположение before и after .
Использовать display: flex вместо inline-block для .line span
```
 .line span {
  display: flex;
  justify-content:center;
  margin: 0 5%;
}
  
```
justity-content: center добавлено для центрирования по горизонтали.
Также добавлено некоторое поле для a и .line span — может быть, вам нужно настроить его больше?

 header {
  max-width: 100%;
  height: 225px;
  background-color: #000;
}
.logo {
  position: relative;
  top: -10px;
}
.line {
  width: 100%;
  height: 2px;
  position: fixed;
  top: 80px;
  text-align: center;
}
.line span {
  display: flex;
  justify-content:center;
  margin: 0 5%;
}
a {
  margin: 0 10px;
}

.line span:before,
.line span:after {
  content: "";
  height: 3px;
  background-color: #FFF;
}
.line span:before {
  width: 80%;
  margin-right: 5%;
}
.line span:after {
  width: 80%;
  margin-left: 5%;
}

 <header>
  <div class="line">
    <span>
          <a href="#"><img class="logo" src="http://i.imgur.com/cPe20kT.png"></a>
        </span>
  </div>
</header>