Floated block-level element: est-il nécessaire de définir la largeur, si oui, comment?
https://stackoverflow.com/questions/406504
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Disons que j'ai des zones de texte, des listes déroulantes et des boutons d'envoi. Ils sont tous des éléments en ligne. Ce qui signifie que & "Officiellement &"; les propriétés margin, padding, width et height doivent être ignorées (en pratique pas vraiment). Si je devais choisir la bonne façon de régler la hauteur sur un bouton, j'écrirais quelque chose comme: display: block puis définir la hauteur. Mais il existe des considérations selon lesquelles un élément de niveau bloc se développerait de manière inattendue. Il serait donc préférable de définir sa largeur à une valeur fixe. Le problème est que je ne connais pas sa largeur car elle peut être définie dynamiquement sur le texte du bouton.
Autre scénario: je souhaite créer un menu via <ul> et <li>. Je souhaite l’aligner horizontalement, avec quelques éléments groupés à gauche et quelques-uns étirés à droite. <=> et <=> sont des éléments de niveau bloc. Puisque je souhaite que mon menu prenne tout l'espace horizontal disponible, puis que je joue avec la hauteur des éléments et que les éléments de menu soient placés des deux côtés, le mode bloc me convient parfaitement. Je vais simplement utiliser float: left et float: right pour mener à bien cette tâche. Mais encore une fois utilisation devrait un peu définir une largeur pour les éléments de menu, car ce sont des éléments de bloc. Je ne connais pas leur largeur car le texte des éléments peut varier. Mais il semble que tout est bien rendu tel quel.
Je n'ai pas remarqué de problème avec les deux éléments en ligne contraints de restituer en tant qu'éléments de bloc sans être flottants ou définis en largeur, ni avec l'exemple d'élément de liste. Cela fonctionne très bien dans IE7, FF3, Opera 9 et Safari, quelle que soit la version actuelle. La question demeure: devrais-je m'inquiéter de ces éléments de bloc en ligne ou de vrais éléments de bloc flottants mais sans la largeur définie ou tout simplement laisser tout tel quel? Est-ce que je manque quelque chose ou est-ce juste une ou plusieurs de ces choses que vous ne devriez tout simplement pas vous attendre à faire correctement?
La solution
Dites que j'ai des boîtes de texte, des listes déroulantes et soumettre des boutons. Ils sont tous éléments en ligne. Ce qui signifie que " officiellement " marge, rembourrage, largeur et les propriétés de hauteur doivent être ignoré (en pratique pas vraiment). Si je devaient aller de la bonne façon pour définir la hauteur à un bouton j'écrirais quelque chose comme display: block puis définir la hauteur. Mais il y a considérations qu'un niveau de bloc l'élément se développerait de façon inattendue alors je ferais mieux de mettre son largeur à une valeur fixe. Le problème est-ce que je ne connais pas sa largeur depuis il peut être défini dynamiquement sur le texte du bouton.
À moins que vous ne parliez de Idées de modèle de boîte d'Internet Explorer . , vous ne devriez pas vous inquiéter de l’expansion ou de la contraction imprévue de quelque chose. Tant que vous vous occupez de normalisation de la variation du navigateur , tout ira bien. Si vous avez un effet secondaire inattendu et indésirable sur le chemin de la conception de la gloire, vous le déboguez, car c’est une erreur de programmation que vous affrontez. CSS peut être bizarre, mais ce n’est pas une excuse appropriée 95% du temps pour la plupart des principaux navigateurs. Les 5% restants dont nous ne parlons pas.
Voici comment je comprends votre problème:
Vous souhaitez qu'un menu flottant <li> de sorte que vous disposiez d'un menu horizontal couvrant toute la largeur de la fenêtre d'affichage (ce que votre utilisateur voit "dans la fenêtre du navigateur") de manière cohérente sur toute la largeur de la fenêtre d'affichage.
On dirait que vous pensez à une conception à largeur fixe, alors que ce qui semble convenir à vos besoins correspond à une conception à largeur fluide. Cela signifie que vous créez une conception "élastique" qui se développe et se contracte par rapport à la taille de la fenêtre du navigateur de l'utilisateur. Si vous avez créé votre conception en prévoyant que les largeurs de pixel soient définies sur chaque élément, vous pouvez probablement trouver un moyen élégant de conserver un en-tête et une navigation de largeur fluide, tout en disposant d'une zone de contenu principale à largeur fixe. Vous pouvez trouver un juste milieu sans une refonte complète. Cette procédure vous intéressera probablement cherchez. Un bon Vous trouverez ici une explication des termes largeur fixe et largeur fluide si vous ne connaissez pas le jargon et souhaitez examiner de plus près ces idées.
Un de plus pour la route:
Il n'est pas seulement recommandé de définir une largeur pour tous les éléments flottants . , mais fait partie de la norme CSS2 selon W3C.
- Angelina
Autres conseils
Si nous prenons le " officiel " La ligne que vous mentionnez est simple, nous n’avons pas à nous soucier de la largeur, de la hauteur et de la présence de ces éléments.
Ne croyez pas que le pixel est parfait, ne vous inquiétez pas de la minutie de la présentation, suivez les normes, autorisez le navigateur & ses utilisateurs pour définir les styles ...
(si seulement c'était vraiment aussi simple que ça dans le & "non-officiel &"; monde réel)
D'accord, je suppose que ma question n'a pas été comprise correctement. Que se passera-t-il si je ne règle pas la largeur des boîtes flottantes? Je ne peux pas le régler, je ne le sais pas. parce que cela dépend du contenu. Est-ce que toutes les boîtes vont simplement rétrécir à leur largeur de contenu? Voilà comment cela fonctionne dans la pratique. Et j'en suis satisfait. Existe-t-il une confirmation officielle que ce comportement devrait être attendu?
Ajouté: J'ai quelque chose d'intéressant ici: http://www.webmasterworld.com/css/3811603.htm
Je suggère de vérifier les recommandations pour une explication plus technique des différences, mais simplement, le comportement des flotteurs a changé entre css2 (1998) et css2.1 (quelques mois de 2005, puis 2007). Par css2, il était obligatoire de définir une largeur sur les flottants, tandis que & "; Rétractable &"; vous voyez dans ff3 est css2.1. Cela signifie que les navigateurs antérieurs à juillet 2007 se conforment aux recommandations relatives à leur date de fabrication en étirant div # container sur toute la largeur de la fenêtre. (Ce qui n'explique pas Opera, mais il a toujours fait sa propre chose.)
Si oui, alors je suis disputé. Comme je l'ai mentionné, cela fonctionne dans IE7, FF3, Opera 9 et Safari actuels.
D'autres commentaires?
(en supposant que si je comprends votre problème)
Dans la plupart des cas, il n'est pas nécessaire de définir la largeur des éléments de la liste. Mais (oui, il ya un mais ici) si vous avez un lien avec display: block (disons que vous voulez utiliser une porte coulissante) vous devez faire un petit truc:
le code HTML:
<ul class="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
Et CSS:
.menu li {
float:left
}
.menu li a {
display:block;
}
/* ===================== */
/* = and the IE6 trick = */
/* ===================== */
* html .menu li a {
width:1%;
white-space:nowrap;
}
Si vous ne le faites pas, le lien sera étendu à tous les parents. Le LINK pas l’élément LIST;) En procédant de cette façon, vous définissez une & Quot; min-largeur & Quot; sur IE6 et vous n'aurez aucun autre problème.
