Блог

Главная - Вопросы по программированию - Как сделать так, чтобы две кнопки рядом друг с другом всегда были одинакового размера

Как сделать так, чтобы две кнопки рядом друг с другом всегда были одинакового размера

#html #css #button #sass

Вопрос:

Как должны выглядеть кнопки в мобильном макете

Уведомление(в мобильной компоновке): Обе кнопки имеют одинаковую высоту. Высота определяется кнопкой с длинным названием. И текст в первой кнопке центрирован по вертикали и горизонтали.

Как должны выглядеть кнопки в макете рабочего стола

Уведомление(в компоновке рабочего стола): Обе кнопки имеют одинаковую ширину. Ширина определяется кнопкой ширина с длинным именем. Это означает, что кнопки не должны занимать по 50% экрана каждая. И текст в первой кнопке расположен по центру. Кроме того, две кнопки расположены по центру с некоторым промежутком между ними.

У меня есть две кнопки рядом друг с другом, как показано в приведенном ниже коде:

 .my-buttons {
    display: flex;
    justify-content: center;
    button {
        cursor: pointer;
    }
}
 
   <div class="my-buttons">
      <button type="button" class="btn btn-outline-primary">
        1st Button
      </button>
      <button type="button" class="btn btn-outline-primary">
        Button with a long name.
      </button>
  </div>

Как я могу сделать так, чтобы кнопки всегда были одинаковой ширины и высоты, независимо от содержимого внутри них. А когда размер экрана большой, размер кнопок должен определяться размером «Кнопки с длинным именем».

Когда на маленьком экране, как на мобильном телефоне. Высота кнопок снова должна определяться высотой «Кнопки с длинным именем».

Ответ №1:

CSS-сетка может это сделать

 .my-buttons {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
} 
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="text-center">
  <div class="my-buttons">
    <button type="button" class="btn btn-outline-primary">
        1st Button
      </button>
    <button type="button" class="btn btn-outline-primary">
        Button with a long name.
      </button>
  </div>
</div>

Комментарии:

1. примечание: найдите дубликат еще раз (нужно найти правильные ключевые слова)

2. Эй, просто обновил вопрос, чтобы было понятнее. Пожалуйста, проверьте это.

3. @YulePale ты запустил мой код? мой ответ-делать все, что ты хочешь

4. ЛОЛ, только что запустил его. Я думал, что мой вопрос был неясен, и именно поэтому я получал более ранние ответы. Но вы поняли это еще до того, как я обновил его. Спасибо вам :).

Ответ №2:

Добавление гибкой основы на 50% сделает обоих детей на 1/2 ширины .my-buttons 

 .my-buttons {
  display: flex;
  justify-content: center;
}

button {
  cursor: pointer;
  flex: 1 0 50%;
} 
 <div class="my-buttons">
  <button type="button" class="btn btn-outline-primary">
    1st Button
  </button>
  <button type="button" class="btn btn-outline-primary">
    Button with a long name.
  </button>
</div>

Комментарии:

1. Спасибо, но это не то, чего я хотел. Я хочу, чтобы длина кнопок не превышала содержимое кнопки с длинным именем. В вашем ответе кнопки занимают больше места, чем нужно.

2. Эй, просто обновил вопрос, чтобы было понятнее. Пожалуйста, проверьте это.

Ответ №3:

 .btn {
        flex: 1 1 0px;
} 
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <div class="my-buttons d-flex">
      <button type="button" class="btn btn-outline-primary">
        1st Button
      </button>
      <button type="button" class="btn btn-outline-primary">
        Button with a long name.
      </button>
  </div>

Установите их так, чтобы их гибкая основа была равна 0, и позвольте им расти:

Комментарии:

1. Эй, просто обновил вопрос, чтобы было понятнее. Пожалуйста, проверьте это.

2. Да, я это сделал. Это было не то решение, которое я искал. Спасибо вам за ваш ответ. Принятый ответ-это то, что я искал.

Метки: ,