Comment faire pour redimensionner automatiquement les onglets pour s'adapter à une largeur fixe conteneur?

Je m'excuse si cela a été demandé avant, mais comment pourrais-je mettre en œuvre des onglets (HTML ordinaire, liste non ordonnée d'éléments) qui eux-mêmes redimensionnement également pour s'adapter à une largeur fixe conteneur à l'aide de CSS et de JavaScript?

Exemple: *Google Chrome, Firefox, Sublime Text, etc. *

recherche sur le web "responsive design"
Vous devriez tag avec de "CSS" plutôt que de "javascript" et "jquery"

OriginalL'auteur Sahat Yalkabov | 2013-03-13

  1. 7

    Si vous savez comment beaucoup de "onglets", vous avez, alors vous pouvez simplement diviser 100 par le nombre, et de définir la largeur d'être que pour cent. c'est à dire: width:20% pour les 5 éléments.

    Cependant...

    Si vous êtes fixé sur l'utilisation de jquery pour définir dynamiquement la largeur de l'élément, voir l'exemple ici:
    http://jsfiddle.net/eMLTB/3/

    <div id="wrapper" class="clearfix">
<ul id="nav">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3</a></li>
    <li><a href="#">link 4</a></li>
    <li><a href="#">link 5</a></li>
    <li><a href="#">link 6</a></li>
</ul>
</div>

    jquery

    var n = $("#nav li").length;
var w = (100/n);
$("#nav li").width(w+'%');

    css

    #wrapper { width: 90%; background:#aaa; }
#nav { margin:0; padding:0;}
#nav li { float: left; list-style:none; margin:0;}
#nav li a { display: block; padding:5px; background: #ddd; margin-right:1px; }
    Cela fonctionne bien, mais lorsque j'essaie de mettre en œuvre dans ce projet, j'ai, pour une raison toujours obtenir le dernier élément sur la ligne suivante. E. g. 5 étiquettes, largeur: 20%, dernier élément n'est pas sur la même ligne. Si je change l'un des <li> à 19% au lieu de 20%, il s'adapte sur la même ligne. J'ai aussi un rembourrage à gauche et à droite de <li>, qui pourrait être la raison?
    oui, c'est la raison. vous devez soustraire le rembourrage de la largeur. vous devez également avoir à définir la marge sous forme d'un pourcentage.
    C'est une mauvaise beacouse la longueur du texte n'est jamais égal...

    OriginalL'auteur superUntitled

  2. 6

    Vous pouvez le faire avec CSS:

    ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}

li {
    display: table-cell;
}

    table-layout: fixed est le bien le plus précieux ici. Normalement, cette propriété possède l'attribut de auto qui, lorsqu'il est appliqué à un tableau de la taille des cellules en fonction de leur contenu. Fixe redimensionner les cellules et leur donner à chacun une largeur égale le total de la largeur du conteneur, divisé par le nombre de cellules. Bonus: il est plus rapide à calculer.

    jsFiddle

    Fonctionne très bien dans Jsfiddle, mais pas dans la table rase, vide de la page HTML et css définies dans <head>. Essayé en dernier chrome et le navigateur firefox.
    Vous pourriez avoir loupé quelque chose. Voici une ardoise propre page HTML avec: dl.dropbox.com/u/70828364/stackoverflow/15394441/index.htm
    Tant pis, j'ai accidentellement tapé .ul au lieu de ul. :p. Le codage sur le bus est très sujette à erreur.
    Ce qui n'allait pas avec ma réponse? Beaucoup plus propre, plus rapide que d'utiliser JS pour ce faire.

    OriginalL'auteur kpeatt

  3. -1

    Donner la liste d'affichage de la "table-row", et les éléments de la liste d'affichage de la "table-cell" avec une largeur de 1%.

    OriginalL'auteur Pickle