0

Не могу применить position: relative для <span class = "humb">.

Пробовал по разному, абсолютное позиционирование задать получается, а при relative элемент исчезает.

html {
  font-size: 62.5%;
}

.wrapper {
  max-width: 1920px;
  padding: 0 10px;
  width: 100%;
  margin: 0 auto;
}

.head {
  width: 100%;
  height: 100vh;
}

.head .header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 10px 20px;
}

.head .header .nav ul {
  display: none;
}

.head .header .nav .humb {
  width: 30px;
  height: 30px;
  position: relative;
  border-bottom: 4px solid #000000;
}
<section class="head">
  <div class="wrapper">
    <header class="header">
      <a href="#" class="logo">Logo</a>
      <nav class="nav">
        <span class="humb"></span>
        <ul>
          <li><a href="#">fdsf</a></li>
          <li><a href="#">fdsfsda</a></li>
          <li><a href="#">dsa</a></li>
          <li><a href="#">das</a></li>
          <li><a href="#">da</a></li>
        </ul>
      </nav>
    </header>
  </div>
</section>

1 ответ 1

3

span - по умолчанию display: inline;

добавьте для .humb - display: block или display: inine-block;

3
  • soledar10 верно пишет...
    – user33274
    19 мар 2017 в 11:16
  • спасибо, дело в том, что до этого делал по тому же принципу без препроцессоров и все работало ок сразу. А тут беда.. 19 мар 2017 в 11:46
  • Может использовался float для .hamb - тогда элемент становиться блочным, аналогично с position: absolute; или использовать button
    – soledar10
    19 мар 2017 в 11:48

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.