4 кнопки не хотят складывать в квадрат

Question

У меня 4 кнопки (пример):

<button>
<button> <br>
<button>
<button>

Это должно быть 2 ряда кнопок по 2 кнопки в каждом, расположенных в виде идеального квадрата кнопок (размер кнопок 130 x 130 пикселей)
Вместо этого мне нужно использовать 8 <br>, чтобы создать 2 ряда кнопок, и есть большой зазор, который разрушает идеальный квадрат.
Если я использую только 7 <br>, я получаю 2 полурряда кнопок, где ряды не касаются углов. Как я могу это исправить?

Answer 1

Самый простой способ - обернуть ваши кнопки в div, установить max-width и использовать flexbox . Это потому, что вы также явно устанавливаете ширину и высоту каждой кнопки, что тогда имеет смысл использовать явное width и для родительского div.

Посмотрите здесь .

Надеюсь, это поможет

Answer 2

Я не уверен, что вы пробовали (как вы упомянули в комментариях).

Поскольку div является отображаемым элементом блока, он займет всю ширину контейнера. Таким образом, оставшееся содержимое будет перенесено на следующую строку.

<div>
   <button>Button 1</button>
   <button>Button 2</button>
</div>
<button>Button 3</button>
<button>Button 4</button>