Faire des boutons de la même largeur sans spécifier la taille exacte?

J'ai 5 boutons. Je veux qu'ils prennent de la largeur disponible de leur div parent, chaque être de taille égale:

<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>

Est-il une manière que je peux le faire sans avoir l'manuellement figure qu'ils ont besoin chaque fois de 20% de la largeur? Je veux supprimer un bouton au moment de l'exécution, et cela signifie que je dois mettre à jour chaque bouton à nouveau pour largeur=25%.

Juste vérifier si il y a un système plus automatisé façon de faire.

Grâce

source d'informationauteur user291701

  1. 12

    La façon la plus simple et la plus robuste, est d'utiliser un tableau:

    <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>

    (Cela ne va pas améliorer votre réputation auprès des collègues de ces jours si ils voient votre code, même si elle n'en résout effectivement le problème est sans doute mieux que toute autre alternative. Donc, vous pourriez envisager de faire la meilleure chose suivante: l'utilisation div balisage et display: table etc. Échoue sur les vieux navigateurs qui ne supportent pas de telles fonctionnalités CSS.)

  2. 3

    C'est de cette façon que j'avais de s'attaquer à une situation comme celle-ci, en prenant une file d'attente à partir avant la fin des systèmes de grille. L'utilisation de classes! Lorsque vous retirez le bouton de changement de la classe. Voici un violon.

    Votre balisage HTML pourrait changer à cela:

    <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 comme ceci:

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

    et jQuery ainsi, bien que vous aurez probablement envie d'utiliser ce script en tant que partie de ce processus supprime le bouton:

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

    Je sais que c'est vieux, mais au cas où quelqu'un d'autre, toujours à la recherche de méthode différente, c'est ma méthode préférée: 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 */
}

    Peu importe le nombre de boutons que vous avez, il va redimensionner la largeur de bouton automatiquement et de remplir le div.

    Stylo qui fonctionne http://codepen.io/anon/pen/YpPdLZ

  4. 0

    Si nous prenons ce que leurs parents sont de même taille, vous avez deux solutions à votre problème:

    CSS:

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

    JavaScript (jQuery):

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

    Veuillez noter, cependant, que pour être sûr que vous obtenez également la valeur exacte, vous pouvez coller à pixels. Si vous êtes prêt à l'utilisation de JavaScript, vous pouvez également utiliser la largeur calculée.

    Modifier

    Si vous souhaitez utiliser du JavaScript sans jQuery, essayez:

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

    Noter, cependant, que .getElementsByTagName() devra être remplacé si vous voulez une requête plus complexe.

  5. 0

    Je pense, avec jQuery, vous pourriez faire quelque chose de plus dynamique.

    Le processus de l'algorithme serait:

    1. obtenir la largeur de la div, de la mettre dans une variable.

    2. diviser la largeur par le nombre de boutons et de mettre la réponse dans une variable.

    3. exécuter une fonction qui crée un bouton avec cette largeur par le nombre de fois requis.