1

Пытаюсь сделать вот такую кнопку с выделенным цветом (как на картинке):

введите сюда описание изображения

/* SASS */

@import 'reset.scss';
@import '../fonts/fonts.scss';
@import 'colors.scss';
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

body {
  font-family: 'Brown';
  font-size: 23px;
  background-color: $background-color;
}

a {
  text-decoration: none;
}

.nav__menu {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  margin-top: 50px;
}

.nav__menu ul li a {
  font-size: 19px;
  font-weight: bold;
  color: #32325d;
  margin-right: 53px;
}

.nav__menu ul>a:nth-child(5) {
  margin-right: 0;
}

.nav__menu .nav ul {
  display: flex;
}

.nav li:last-child {
  background-color: $btn-color;
}
<header>
  <div class="container">
    <div class="nav__menu">
      <div class="logo">
        <img src="/assets/images/Logo.png" alt="LogoType">
      </div>
      <div class="nav">
        <ul>
          <li><a href="#">Product</a></li>
          <li><a href="#">Customers</a></li>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Docs</a></li>
          <li><a href="#">Sign in</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

Пытался убрать отступ последнего элемента путём margin-right: 0;, но почему-то не помогло.
Заранее благодарю :)

1 ответ 1

0
  1. Элемент a не является прямым потомком ul, по этому данный селектор не срабатывает .nav__menu ul>a:nth-child(5).
  2. Свойство margin-top для nav__menu не будет работать в данном случае, из-за особенности схлопывания внешних отступов, лучше воспользоваться padding-top.
  3. Отступы в данном случае будет корректнее задавать для элементов списка li, тогда можно убрать лишний отступ для последнего элемента по аналогии с тем, как вы задаете бекграунд. Либо воспользоваться таким селектором .nav ul li + li { margin-left: 53px; }, тогда этого отступа вообще не будет.
  4. Стилизовать ссылку в виде кнопки лучше по дополнительному классу, а не через псевдоселекторы.
  5. Для навигации думаю будет уместнее использовать тег nav.
  6. Именование классов не соответствует структуре, элемент с классом nav__menu не может являться родительским для блока с классом nav.

Я бы сделал вот такую структуру

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 0;
}

.header-nav {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-nav__item + .header-nav__item {
  margin-left: 50px;
}

.header-nav__link {
  font-size: 19px;
  font-weight: bold;
  color: #32325d;
  text-decoration: none;
}

.header-nav__btn {
  padding: 10px 15px;
  border-radius: 5px;
  background-color: purple;
  font-size: 19px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
}
<header class="header">
  <div class="container">
    <div class="header__inner">
      <img src="/assets/images/Logo.png" alt="LogoType" class="header__logo">
      
      <nav class="header__nav">
        <ul class="header-nav">
          <li class="header-nav__item">
            <a href="#" class="header-nav__link">Product</a>
          </li>
          <li class="header-nav__item">
            <a href="#" class="header-nav__link">Customers</a>
          </li>
          <li class="header-nav__item">
            <a href="#" class="header-nav__link">Pricing</a>
          </li>
          <li class="header-nav__item">
            <a href="#" class="header-nav__link">Docs</a>
          </li>
          <li class="header-nav__item">
            <a href="#" class="header-nav__btn">Sign in</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</header>

4
  • элемент с классом nav__menu не может являться родительским для блока с классом nav. - это почему ? 9 июн 2021 в 9:37
  • @MaximLensky ну если придерживаться именования классов по БЭМ, что думаю в целом уместно, а с использованием препроцессоров еще и удобно, то элемент не может находиться вне блока
    – kost1k
    9 июн 2021 в 9:59
  • у него о бэм там и слова нету ... а почему не SMACSS/eCSS а именно бэм ? 9 июн 2021 в 10:01
  • @MaximLensky Разве плохо упомянуть о хорошем подходе если его там нет, даже не в контексте БЭМ'a? SMACSS мне не очень импонирует, использование id, нет удобства в организации файлов стилей, увеличенная вложенность селекторов. В целом не считаю какой-то подход идеальным, иногда что-то совмещается, но касаемо именования классов и организации файлов стилей, БЭМ мне показался самым понятным и удобным для восприятия.
    – kost1k
    9 июн 2021 в 11:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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