Подтвердить что ты не робот

Сделать кнопки одинаковой ширины без указания точного размера?

У меня есть 5 кнопок. Я хочу, чтобы они использовали доступную ширину своего родительского div, каждый из которых был одинаковым:

<div style="width: 100%; background-color: red;">
    <button type="button" style="width: 20%;">A</button>
    <button type="button" style="width: 20%;">B</button>
    <button type="button" style="width: 20%;">C</button>
    <button type="button" style="width: 20%;">D</button>
    <button type="button" style="width: 20%;">E</button>
</div>

Есть ли способ, которым я могу это сделать, не имея вручную выяснить, что каждая из них требует 20% ширины? Я хочу удалить кнопку во время выполнения, а это значит, что мне нужно снова обновить каждую оставшуюся кнопку до ширины = 25%.

Просто проверьте, есть ли более автоматизированный способ сделать это.

Спасибо

4b9b3361

ОТВЕТЫ

Ответ 1

Самый простой способ и самый надежный способ - использовать таблицу:

<style>
.buttons { 
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: red; 
}
.buttons button { 
  width: 100%;
}
</style>
<table class=buttons>
 <tr>
    <td><button type="button">A</button>
    <td><button type="button">B</button>
    <td><button type="button">C</button>
    <td><button type="button">D</button>
    <td><button type="button">E</button>
</table>

(Это не улучшит вашу репутацию среди коллег в эти дни, если они увидят ваш код, хотя на самом деле он решает проблему, вероятно, лучше, чем любая другая альтернатива. Поэтому вы можете подумать о следующем: используйте div разметку и display: table и т.д. Не работает в старых браузерах, которые не поддерживают такие функции CSS.)

Ответ 2

Вот как я бы справился с ситуацией, подобной этой, взяв очередь из интерфейсных систем сетки. Используйте классы! Когда вы удаляете кнопку, измените класс. Здесь скрипка.

Ваша разметка HTML может измениться на следующее:

<div>
    <button type="button" class="fiveup">A</button>
    <button type="button" class="fiveup">B</button>
    <button type="button" class="fiveup">C</button>
    <button type="button" class="fiveup">D</button>
    <button type="button" class="fiveup" id="remove_this">E</button>
</div>
<button id="remove_one">Remove One</button>​

CSS так:

.fiveup {width: 18%;margin:1%;float: left;}
.fourup {width: 23%;margin:1%;float: left;}

и jQuery, как будто, хотя вы, вероятно, захотите использовать этот script как часть любого процесса, удаляет кнопку:

$('#remove_one').click(function(){
    $('#remove_this').remove();
    $('button').each(function(){
        $(this).removeClass('fiveup').addClass('fourup');
    });
});​

Ответ 3

Я знаю, что это старый, но если кто-то еще ищет другой метод, это мой любимый метод: Flexbox!

<div style="width: 100%; background-color: red;">
    <button type="button">A</button>
    <button type="button">B</button>
    <button type="button">C</button>
    <button type="button">D</button>
    <button type="button">E</button>
</div>

div {
  display:flex;
  justify-content:space-around;
}
button {
  width: 100%;
  margin: 5px; /* or whatever you like */
}

Независимо от того, сколько кнопок у вас есть, оно автоматически изменяет размер ширины кнопки и заполняет div.

Рабочая ручка http://codepen.io/anon/pen/YpPdLZ

Ответ 4

Если мы возьмем, что их родители одинаково рассчитаны, у вас есть два решения вашей проблемы:

CSS

button { /* You may want to limit the selector */
     width: 100%; /* Or any other percent */
}

JavaScript (jQuery):

$("button").width("100%");

Обратите внимание, что, конечно, вы также получите точное значение, вы можете захотеть придерживаться пикселей. Если вы хотите использовать JavaScript, вы также можете использовать вычисленную ширину.

Edit

Если вы хотите использовать JavaScript без jQuery, попробуйте:

var buttons = document.getElementsByTagName("button"),
    i = 0;
for (; i < buttons.length; i++) {
     buttons[i].width = "100%"; //Or any other value
}

Обратите внимание, однако, что .getElementsByTagName() нужно будет заменить, если вам нужен более сложный запрос.

Ответ 5

Я думаю, что с jQuery вы могли бы сделать что-то более динамичное.

Процесс для алгоритма будет:

  • получить ширину div, помещенную в переменную.

  • разделите ширину на количество кнопок и поместите этот ответ в переменную.

  • запустите функцию, которая создает кнопку с такой шириной, сколько раз требуется.