Как правильно выставить блоки?

Рейтинг: 0Ответов: 2Опубликовано: 27.02.2023

Имеется такой блок (li), у меня по макету вся эта ширина 300px, я даю li flex и max-width: 300px дабы выставить в ряд их и полю даю width: 100% но он не выставляется. Подскажите, как написать для этого стили? введите сюда описание изображения

<nav class="my-links__block block-links"> 
    <ul class="block-links__list"> 
        <li class="block-links__item"> 
            <div class="block-links__line"> 
                <input type="text" class="block-links__input"> 
            </div> 
            <div class="block-links__line"> 
                <button class="block-links__btn">Скопировать</button> 
            </div> 
        </li> 
    </ul> 
</nav>
css html
Источник: Stack Overflow на русском

Ответы

▲ 0

li {
  list-style: none;
  display: flex;
  align-items: center;
  width: 100%;
}
input {
  width: 100%;
}
ul {
  padding: 0;
  margin: 0;
}
.block-links__line:first-child {
  width: 100%;
}
<nav class="my-links__block block-links"> 
    <ul class="block-links__list"> 
        <li class="block-links__item"> 
            <div class="block-links__line"> 
                <input type="text" class="block-links__input"> 
            </div> 
            <div class="block-links__line"> 
                <button class="block-links__btn">Скопировать</button> 
            </div> 
        </li> 
    </ul> 
</nav>

▲ 0

Предложу еще такой вариант...

li {
  list-style: none;
  display: flex;
  width: 100%;
}

input {
  width: 100%;
}

ul {
  padding: 0;
  margin: 0;
}

.block-links__line:first-child {
  flex-grow: 1;
}
<nav class="my-links__block block-links">
  <ul class="block-links__list">
    <li class="block-links__item">
      <div class="block-links__line">
        <input type="text" class="block-links__input">
      </div>
      <div class="block-links__line">
        <button class="block-links__btn">Скопировать</button>
      </div>
    </li>
  </ul>
</nav>