Comment afficher inline plusieurs <li> avec 100% de la largeur?

J'ai le code html suivant:

<div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>

appliqué avec un css comme suit:

#container { width:100%; overflow:auto; }
#container ul { width: 100%; }
#container li { width: 100%; }

Alors maintenant, je voudrais avoir un nombre indéterminé d'éléments (<li>) le tout avec 100% de la largeur (de sorte qu'ils peuvent ajuster en conséquence pour le navigateur de la taille de la fenêtre), mais tout à côté, l'affichage de la barre de défilement horizontale dans le conteneur.

J'ai essayé de mettre "display:inline" sur ul css, et "float:left" sur li css, mais sans succès.

Des suggestions?

Aussi, essayez de considérer que je suis en train de faire ce que les "croix-navigateur compatible" que possible.

Merci d'avance.

Par "100% de la largeur", je devine ce que tu veux dire c'est que chaque li devrait être aussi large que son texte, le corriger? Parce que "width: 100%" aurait de faire de la li éléments aussi large que l'ul, qui est aussi large que le conteneur, qui je suppose est aussi large que l'écran.
exactement.. l'idée est d'avoir li largeur de la largeur de l'écran 😛 Il est facile d'obtenir les afficher verticalement (avec celle de largeur), mais je tiens à les avoir affichées horizontalement.

OriginalL'auteur Rui | 2010-03-12

11

Comme les autres j'ai du mal à comprendre ce que vous cherchez exactement, mais est-ce à faire ce que vous voulez?
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Horizontal 100% LIs</title>
    <style type="text/css">
#container { width:100%; overflow:auto;}
#container ul { padding:0; margin:0; white-space:nowrap; }
#container li { width: 100%; list-style-type:none; display:inline-block; }
* html #container li { display:inline; }  /* IE6 hack */
* html #container { padding-bottom:17px;}  /* IE6 hack  */
*:first-child+html #container li { display:inline; } /* IE7 hack */
*:first-child+html #container { padding-bottom:17px; overflow-y:hidden; }  /* IE7 hack  */
    </style>
</head>
<body>
    <div id="container">
      <ul>
        <li style="background-color:red">element 1</li><li style="background-color:green">element 2</li><li style="background-color:blue">element 3</li>
      </ul>
    </div>
</body>
</html>
```
Obtenir le LIs sur une ligne est en deux parties. Le white-space:nowrap sur l'ul s'arrête tout d'enrubannage automatique et le display:inline-block sur la LIs leur permet d'exécuter l'un après l'autre, mais d'avoir des largeurs, des remplissages et des marges. Pour les navigateurs conformes aux normes que c'est suffisant.

Cependant IE6 et IE7 besoin d'un traitement spécial. Ils ne prennent pas en charge le display:inline-block correctement, mais heureusement display:inline sur les éléments avec hasLayout donne un comportement très display:inline-block. Le width:100% a déjà forcé hasLayout pour être mis sur le LIs tout ce que nous avons à faire est de diriger le display:inline pour IE6 et IE7. Il y a un certain nombre de façons de le faire (les commentaires conditionnels sont populaires sur StackOverflow), mais ici j'ai choisi l' * html et *:first-child+html hacks pour faire le travail.

En outre, IE6 et IE7 ont un autre bug où la barre de défilement des superpositions le contenu, de sorte que le conteneur est donné un padding-bottom pour faire de la place pour la barre de défilement. La barre de défilement est une plate-forme de contrôle, de sorte que sa hauteur ne peut pas être connue avec exactitude, mais 17 pixels semble fonctionner pour la plupart des cas.

Enfin, IE7 aussi veut mettre dans une barre de défilement verticale, de sorte que le overflow-y:hidden dirigé à IE7 s'arrête que cela se passe.

(Le padding:0, la marge:0, list-style:none, et le sur les styles individuels LIs sont juste là pour montrer plus clairement ce qui se passe.)

OriginalL'auteur Alohci

Vous voulez agir comme un bon vieux tableau:

<ul class="menu">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>


.menu {
    display: table;
    width: 100%;
}
.menu li {
    display: table-cell;
    padding: 2px;

    background: #900990;
    border: 1px solid yellow;
    color: white;
}

alors vous pouvez aussi l'effondrement du bien quand la page est petite:

/* responsive smaller screen turn into a vertical stacked menu */
@media (max-width: 480px) {

   .menu, .menu li {
       display: normal;
    }

}

OriginalL'auteur felix

1

Ce que vous essayez de faire ressemble à ce que les cellules d'un tableau faire, et c'est impossible autrement, sans l'aide de JavaScript (je ne le conseille pas à l'aide de tableaux ou de JavaScript pour ce faire, cependant). Votre meilleur pari est de mettre une certaine quantité de remplissage horizontal sur le <li> balises et flotteur de sorte qu'ils sont auto-largeur en fonction de leur contenu de largeur au lieu de la largeur de la fenêtre:
```
<div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>

<style type="text/css">
#container, #container ul {
    width: 100%;
    float: left;
}

#container ul li {
    margin: 0 10px 0 0;
    padding: 5px 10px;
    float: left;
}
</style>
```
L'autre méthode consiste à utiliser display: inline-block; à réaliser ce que vous voulez, mais c'est une sorte de hack (pas de croix-navigateur compatible).

OriginalL'auteur orokusaki

à l'aide de jquery à l'espace de votre li après votre page a

  var ul = $('#yourListId');
  var numChildren = ul.children().length;
  if(numChildren <= 0){
    return;
  }
  ul.css({'list-style':'none','margin':0,'padding':0});
  var parentWidth = ul.width();
  var childWidth = parentWidth/numChildren;
  ul.children().each(function(index, value){
    $(this).css({'width':childWidth,'margin':0,'float':'left','display':'inline-block'});
  });
  ul.after('<div style="clear:both">');

À l'exception de la "childWidth" css... vous pouvez, bien sûr, remplacer les autres css avec quelque chose à partir d'une feuille de style.

OriginalL'auteur Nawlbergs

0

Généralement pour montrer li horizontalement vous flottent à tous de gauche. La partie qui me confond, c'est du 100% de largeur. Comment peut-chaque li ont 100% de largeur lorsqu'elles ne peuvent être aussi large que leur conteneur? Il semble que le li doivent être de largeur fixe ou autosized sans largeur.
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
        #container { width:100%; overflow:auto; }
        #container ul { width: 100%; }
        #container li { float:left; }
    </style>
</head>
<body>
    <div id="container">
      <ul>
        <li>element 1</li>
        <li>element 2</li>
      </ul>
    </div>
</body>
</html>
```
Si vous donnez à chaque li 100%, il va remplir le conteneur parent. donc, si l'ul est de 200px, la batterie au lithium doit être 200px.
Bon, je crois que je comprends ce que vous voulez, mais la façon dont je voudrais faire est d'utiliser JavaScript. Est qu'une option pour vous?
Vous ne devriez pas répondre à une question par une autre question.

OriginalL'auteur Randy Simon
0

Je pense que ce que vous voulez faire n'est pas possible de croix-navigateur css et html; si vous définissez la largeur de la li à 100%, vous définissez la largeur de son élément parent et ce que vous avez vraiment besoin est de l'élément parent (le ul) pour avoir la largeur de tous les li du combiné. Et vous ne pouvez pas définir la largeur x de la largeur de l'écran à l'aide seulement de css.

Et même si vous le pouvez, il serait également élargir la li comme le dit d'être à 100% de son élément parent. Tri de la poule et de l'œuf problème pour le navigateur.

En javascript est facile, suffit de calculer le nombre de li, leur largeur à la largeur de l'écran et régler la ul largeur (le nombre de li) x (largeur de l'écran).

OriginalL'auteur jeroen
0

Essayer cette
```
<div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>


   #container { width:100%;  }
   #container ul { text-align:center; }
   #container li { display:inline; text-align:center;padding-left:20px; padding-right:20px; }
```
Cela ne fonctionne pas. li largeur est réduite à la taille du contenu à la place.
J'ai édité ma réponse. Il fonctionne maintenant. Je l'ai testé.
nop.. il ne les centres de deux éléments côte à côte, avec la largeur limitée par la taille de leur contenu et 40px de rembourrage.
Je suppose que je ne suis pas la compréhension de ce que vous cherchez alors.

OriginalL'auteur Catfish

Vous devez vous connecter pour publier un commentaire.