Как убрать возможность блока растягиваться на всю ширину или высоту?

Question

[drotsyk]

<div class="main__header">
            <div class="main__logo">
              <img class="main__icon" src="img/top-logo.png" alt="" />
              <div class="main__name">
                Dart
                <p>service manager</p>
              </div>
            </div>
            <nav class="main__menu">
              <ul class="menu__items">
                <li class="menu__link"><a href="#"> Home </a></li>
                <li class="menu__link"><a href="#"> Service </a></li>
                <li class="menu__link"><a href="#"> Extension </a></li>
                <li class="menu__link"><a href="#"> Pricing </a></li>
                <li class="menu__link"><a href="#"> Help </a></li>
              </ul>
            </nav>
            <button class="main__sing-up">sign up</button>

.main__header{
    display: flex;
    justify-content: space-between;
    padding: 0 0 80px 0;
}
.main__logo{
    display: flex;
}
.main__icon{
    max-height: 20px;
}
p{
margin: 0;
}
.main__name{
    color: white;
    font-family: var(--extra-bold);
    margin: 0 0 0 15px ;
}
li{
    list-style-type: none;
}
.menu__items{
    display: flex;
}
.menu__link{
    margin: 0 20px 0 0;
    font-family: var(--top-family);
}
.menu__link a{
    color: white;
}
.menu__link a:hover{
    color: black;
}
.main__sing-up{
  padding: 6px 20px;
  background-color: transparent;
  color: white;
  border-radius: 10%;
  border: 1px solid white;
}

кнопка расширяется на всю высоты блока из за текста, как убрать у кнопки и вообще любого блока так делать?

Comments

[Danny Arty]

кнопка расширяется на всю высоты блока из за текста, как убрать у кнопки и вообще любого блока так делать

Ват?

Как убрать возможность блока растягиваться на всю ширину или высоту?

мб убрать width: 100% и height: 100%

А вообще бы код, как реализовано у вас

[drotsyk]

Danny Arty, слева текст в 2 строчки, из за него кнопку справа увеличивает на всю высотку блока

[Ankhena]

drotsyk, align-items: center
ну или не центр, а что вам нужно

[Danny Arty]

drotsyk, а у вас текст не картинкой вставлен случайно?

слева текст в 2 строчки, из за него кнопку справа увеличивает на всю высотку блока

Тут решение зависит от того, как у вас реализовано. По картинке вряд ли кто подсказку дельную даст

[drotsyk]

Danny Arty, я вставил код в пост

[Danny Arty]

drotsyk, задайте кнопке фиксированную высоту и свойство align-self: center

[drotsyk]

Danny Arty, align-self помог, спасибо, не знал про это свойство

Answer 1

[DrWeyber]

Попробуй сделать ей display: inline-block, она будет занимать ширину по контенту

Comments

[OGuman]

Спасибо