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 that you have read and understand our privacy policy and code of conduct.

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