Как добавить кнопки в столбец с одинаковой и динамической шириной

Question

Пытаюсь добавить кнопки друг под другом. Я хочу, чтобы все эти кнопки были равны ширине самой широкой кнопки. Ширина кнопок зависит от текста кнопки и не должна составлять 100%.

<div>
    <div><button type="button">short</button></div>
    <div><button type="button">medium</button></div>
    <div><button type="button">very long</button></div>
</div>

html css

1

Rauno Lillemets 21 Янв 2021 в 13:12

Answer 1

Width:100% будет работать, если общий родительский элемент будет уменьшен до ширины самого большого дочернего элемента

.parent {
  width: max-content;
  border: 1px solid red;
}

button {
  width: 100%;
}

<div class="parent">
  <div><button type="button">short</button></div>
  <div><button type="button">medium</button></div>
  <div><button type="button">very long</button></div>
</div>

Или используйте inline-block (или даже столбец inline-flex).

.parent {
  display: inline-block;
  border: 1px solid red;
}

button {
  width: 100%;
}

<div class="parent">
  <div><button type="button">short</button></div>
  <div><button type="button">medium</button></div>
  <div><button type="button">very long</button></div>
</div>

2

Paulie_D 21 Янв 2021 в 10:15

Answer 2

Установите для кнопки ширину и высоту проницаемости по классу кодирования или идентификатору

<html>
<head>
<style>

.block 
{
  display: block;
  width: 25%;
  border:none;
  background-color: black;
  color: gray;
  padding: 14px 14px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
}


.block:hover 
{
  background-color: white;
  color: black;
}

</style>
</head>
<body>


<button class="block">Short</button><br>
<button class="block">Medium</button><br>
<button class="block">Very Long</button>

</body>
</html>

-1

Vihanga Sakwithi 21 Янв 2021 в 11:03

Как добавить кнопки в столбец с одинаковой и динамической шириной

2 ответа

Похожие вопросы

Новые вопросы

html