J'ai le suivant HTML: appliqué avec un CSS comme suit: alors je voudrais donc avoir un Nombre indéterminé d'éléments ( J'ai essayé de mettre "Affichage: inline" sur UL's CSS et "Float: gauche" sur le CSS de Li, mais sans succès. Toute suggestion? Essayez également de considérer que j'essaie de faire cela comme étant "compatible entre navigateur" aussi possible que possible. Merci d'avance.
7 Réponses :
Essayez ceci
Cela ne fonctionne pas. La largeur de Li obtient à la place de sa taille de contenu.
NOP .. Il est juste centré les deux éléments côte à côte, avec la largeur limitée par la taille de leur contenu plus 40px de rembourrage.
Je suppose que je ne comprends pas ce que tu cherches alors.
généralement pour montrer à Li horizontalement, vous les flotteriez tout à gauche. La partie qui me confond est la largeur de 100%. Comment chaque LI peut-elle avoir 100% de largeur quand elles ne peuvent être que aussi larges que leur conteneur? Il semble que le LI a besoin d'être une largeur fixe ou autosisée sans largeur du tout.
<!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 remplira le conteneur parent. Donc, si l'UL est 200px, le LI devrait être 200px.
D'accord, je pense que je comprends ce que vous voulez, mais la façon dont je ferais cela est d'utiliser JavaScript. C'est une option pour toi?
Vous ne devriez pas répondre à une question avec une autre question.
Qu'est-ce que vous essayez de ressembler à ce que les cellules du tableau font et sont impossibles autrement, sans utiliser JavaScript (je ne suggère pas d'utiliser des tables ni de la JavaScript pour cela). Votre meilleur pari est de définir une certaine quantité de remplissage horizontal sur les balises <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>
Je pense que ce que vous voulez faire n'est pas possible dans le navigateur croisé CSS et HTML; Si vous définissez la largeur du Et même si vous le pouviez, cela augmenterait également les LI comme on vous dit que 100% de son élément parent. Sorte d'un problème de poulet et d'œuf pour le navigateur.
Dans JavaScript est facile, cependant, calculez simplement le nombre de LI, définissez leur largeur sur la largeur de l'écran et définissez la largeur Li à 100%, vous le définissez sur la largeur de son élément parent et de ce que vous avez vraiment besoin est pour l'élément parent (le ul ) avoir la largeur de tous les Li combinés. Et vous ne pouvez pas définir la largeur sur X-fois la largeur de l'écran en utilisant uniquement CSS.
ul sur (le nombre de LI'S) x (largeur de l'écran).
Comme les autres, je me débats pour comprendre ce que vous cherchez exactement, mais cela fait-il ce que vous voulez? Obtenir le LIS sur une ligne a deux parties. L'espace blanc: Nowrap sur l'UL arrête tout emballage automatique et l'affichage: Inline-Block sur le LIS leur permet de les exécuter l'un après l'autre, mais d'avoir des largeurs, des pompiers et des marges sur eux. Pour les navigateurs conformes aux normes suffisantes. Cependant, IE6 et IE7 nécessitent un traitement spécial. Ils ne prennent pas en charge l'affichage: Inline-Block correctement, mais affichent heureusement: Inline sur les éléments de jeu de haslayout donne un comportement très similaire à l'affichage: Inline-Block. La largeur: 100% a déjà forcé HASLAYOUT à être définie sur le LIS, tout ce que nous avons à faire est de diriger l'affichage: Inline à IE6 et IE7 uniquement. Il y a plusieurs façons de faire cela (les commentaires conditionnels sont populaires sur Stackoverflow), mais ici, j'ai choisi le * HTML et *: First-Enfant + HTML Hacks pour faire le travail. En outre, IE6 et IE7 ont un autre bogue où la barre de défilement recouvre le contenu, le conteneur est donc donné un fond de remplissage pour créer de la place pour la barre de défilement. La barre de défilement est un contrôle de la plate-forme, de sorte que sa hauteur ne peut pas être connue exactement, mais 17 pixels semblent fonctionner pour la plupart des cas. Enfin, IE7 souhaite également mettre dans une barre de défilement verticale, donc le débordement Y: caché dirigé vers IE7 arrête de cela de ce qui se passe. (le rembourrage: 0, marge: 0, style de liste: Aucun, et les styles sur les liens individuels sont juste là pour montrer plus clairement ce qui se passe .)
Utilisation de jQuery pour espacer votre LI d'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">');
Vous voulez que cela agisse comme une bonne table à l'ancienne: alors vous pouvez également l'effondrer correctement lorsque la page est petite: P> /* responsive smaller screen turn into a vertical stacked menu */
@media (max-width: 480px) {
.menu, .menu li {
display: normal;
}
}
Par "100% largeur", je suppose que ce que vous voulez dire, c'est que chaque LI devrait être aussi large que son texte, correct? Parce que «largeur: 100%» rendrait chacun des éléments LI aussi larges que l'UL, qui est aussi large que le conteneur que je devine est aussi large que l'écran.
Exactement .. L'idée est d'avoir la largeur de Li aussi large que l'écran: P Il est facile de les faire afficher verticalement (avec cette largeur), mais je voudrais les faire afficher horizontalement.