{"id":888,"date":"2011-03-17T22:35:14","date_gmt":"2011-03-17T21:35:14","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=888"},"modified":"2017-03-22T13:40:43","modified_gmt":"2017-03-22T12:40:43","slug":"display-inline-block-une-valeur-trop-peu-utilisee","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/display-inline-block-une-valeur-trop-peu-utilisee","title":{"rendered":"Display inline-block, une valeur trop peu utilis\u00e9e"},"content":{"rendered":"

Float<\/code>era, float<\/code>era pas… mais pourquoi ne pas utiliser la valeur inline-block<\/code> de la propri\u00e9t\u00e9 display<\/code> ?
\nVous connaissez certainement les valeurs block<\/code> ou inline<\/code>, mais moins celle de inline-block<\/code> et pourtant elle peut vous servir dans bien des cas.
\nVoyons dans quelles conditions nous pouvons l’utiliser (de mani\u00e8re non exhaustive) dans un premier temps, puis dans un second temps quelques difficult\u00e9s dans son utilisation.<\/p>\n

Exemples de l’article<\/a><\/p>\n

Utiliser display: inline-block<\/code><\/h2>\n

Il s’agit de la valeur par d\u00e9faut des \u00e9l\u00e9ments input<\/code>.
\nC’est pour cela que l’utilisation de cet \u00e9l\u00e9ment est aussi simple : il reste \u00e0 c\u00f4t\u00e9 de votre label, vous pouvez en changer sa largeur, sa hauteur, ses marges, etc..<\/p>\n

Le formulaire<\/h3>\n

Quelle transition !
\n\u00ab\u00a0Bon allez, c’est juste pour le formulaire, je vais utiliser un tableau de mise en page pour ne pas m’emb\u00eater\u00a0\u00bb.
\nJe le lis et le vois encore souvent dans les codes sources. (et je l’eus fait…)
\nSi ce n’est pas du tableau ce sera un jeu de float<\/code> et de clear<\/code>.
\nJe vous propose cette forme de mise en page pour formulaire<\/a>.<\/p>\n

Dans cette mise en page les label<\/code> passent d’un display<\/code> \u00e0 valeur inline<\/code> \u00e0 un display: inline-block;<\/code>
\nUn \u00e9l\u00e9ment en inline-block<\/code> peut recevoir une valeur de vertical-align<\/code> qui, par d\u00e9faut, ne semble pas \u00eatre la m\u00eame sur IE<\/abbr> et sur les autres navigateurs.<\/p>\n

Notre code CSS<\/abbr> va donc nous permettre d’avoir un comportement homog\u00e8ne.
\nLe HTML<\/abbr> :<\/p>\n

<form name=\"my_form\" action=\"#result\" method=\"post\">\r\n\t<p> <label for=\"nom\">Nom<\/label> <input type=\"text\" id=\"nom\"> <\/p>\r\n\t<p> <label for=\"email\">E-mail<\/label> <input type=\"e-mail\" id=\"email\"> <\/p>\r\n\t<p> <label for=\"sujet\">Sujet<\/label> <input type=\"text\" id=\"sujet\"> <\/p>\r\n\t<p> <label for=\"message\">Message<\/label> <textarea id=\"message\"><\/textarea> <\/p>\r\n<\/form><\/code><\/pre>\n
Le CSS<\/abbr> :<\/p>\n
input, textarea {\r\n\t\/*d\u00e9j\u00e0 en inline-block*\/\r\n\twidth: 150px;\r\n\tpadding: 4px;\r\n\tvertical-align: top;\r\n}\r\n\r\n#sujet { width: 250px; }\r\n\r\ntextarea {\r\n\twidth: 300px;\r\n\theight: 5em;\r\n}\r\n\r\nlabel {\r\n\tdisplay: inline-block;\r\n\twidth: 100px;\r\n\tmargin-right: 20px;\r\n\tvertical-align: top;\r\n\ttext-align: right;\r\n}<\/code><\/pre>\n
Aper\u00e7u du formulaire<\/a><\/p>\n
Une navigation horizontale (\u00e9l\u00e9ments de liste)<\/h3>\n
Le deuxi\u00e8me cas o\u00f9 l’on peut remplacer ais\u00e9ment le float<\/code> par du inline-block<\/code> c’est celui d’une liste dont on souhaite dimensionner les liens plac\u00e9s sur une seule ligne.
\nLa valeur par d\u00e9faut d’un <li><\/code> pour la propri\u00e9t\u00e9 display<\/code> est list-item<\/code>. Cette valeur est connue pour ses styles par d\u00e9faut (margin-start plus ou moins \u00e9lev\u00e9e, puce de liste de type disc<\/code>, saut de ligne, etc.).<\/p>\n
Cette valeur par d\u00e9faut du display<\/code> va nous poser probl\u00e8me si on veut placer tous nos liens sur une seule ligne.
\nQu’\u00e0 cela ne tienne, il nous suffit d’appliquer la valeur inline \u00e0 la propri\u00e9t\u00e9 display :<\/p>\n
Le code HTML<\/abbr> :<\/p>\n
<ul>\r\n\t<li><a href=\"#\">Item 1<\/a><\/li>\r\n\t<li><a href=\"#\">Item 2<\/a><\/li>\r\n\t<li><a href=\"#\">Item 3<\/a><\/li>\r\n\t<li><a href=\"#\">Item 4<\/a><\/li>\r\n<\/ul><\/code><\/pre>\n
Le code CSS<\/abbr> :<\/p>\n
li {\r\n\tdisplay: inline;\r\n        list-style: none; \/* pour enlever les puces sur IE7 *\/\r\n\tmargin: 10px;\r\n}<\/code><\/pre>\n
Ce tron\u00e7on est plut\u00f4t simple, mais il a le m\u00e9rite de supprimer les styles par d\u00e9faut de notre liste.<\/p>\n
Les liens sont un peu coll\u00e9s si on en reste l\u00e0, on va donc leur appliquer de nouveaux styles :<\/p>\n
li a {\r\n\tdisplay: inline-block;\r\n\twidth: 100px;\r\n\tpadding: 5px 10px;\r\n\ttext-decoration: none;\r\n\tcolor: #fff;\r\n\tfont-weight: bold;\r\n\tbackground: #999;\r\n} <\/code><\/pre>\n
Aper\u00e7u<\/a>
\nLe lien ainsi styl\u00e9 peut subir autant de transformation que vous le d\u00e9sirez, lui appliquer un background et lui donner les dimensions que vous souhaitez devient un jeu d’enfant.<\/p>\n
Quelques soucis…<\/h2>\n
Oui il y en a, sinon \u00e7a ne serait pas marrant !<\/p>\n
Le cas Internet Explorer<\/h3>\n
En effet lorsque l’on souhaite appliquer un inline-block<\/code> sur un \u00e9l\u00e9ment, la valeur est prise en compte par IE<\/abbr> uniquement si celle par d\u00e9faut de l’\u00e9l\u00e9ment est inline<\/code>.
\nPour les cas pr\u00e9c\u00e9dents, nous avions un <label><\/code> \u00e0 placer en inline-block<\/code>, ceci n’a pas pos\u00e9 de probl\u00e8me car la valeur par d\u00e9faut de son display<\/code> est inline<\/code> (idem pour l’\u00e9l\u00e9ment <a><\/code>).
\nDans l’exemple suivant nos \u00e9l\u00e9ments sont par d\u00e9faut en block<\/code>. Le remplacement de cette valeur par inline-block<\/code> ne sera pas compris par IE<\/abbr> (version inf\u00e9rieure \u00e0 8).
\nMais il y a une astuce.
\nSur une feuille de style alternative (code \u00e0 placer entre les balises <head><\/code>) :<\/p>\n
<!--[if IE 7]>\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"styles-ie7.css\" \/>\r\n<![endif]--><\/code><\/pre>\n
il vous faudra pr\u00e9ciser (dans votre CSS<\/abbr>) :<\/p>\n
element {\r\n   zoom: 1; \/*offre le layout \u00e0 un \u00e9l\u00e9ment (*)*\/\r\n   display: inline;\r\n}<\/code><\/pre>\n
(*)correction Rapha\u00ebl<\/a>
\nPour IE<\/abbr> un \u00e9l\u00e9ment inline<\/code> qui poss\u00e8de le layout<\/a> aura le m\u00eame comportement qu’un inline-block<\/code>.<\/p>\n
Le probl\u00e8me white-space<\/code><\/h3>\n
Venons-en \u00e0 l’exemple.
\nPour une raison qui ne nous int\u00e9resse pas, je souhaite afficher trois divisions les unes \u00e0 c\u00f4t\u00e9 des autres, je sais que la place disponible en largeur est de 900px :<\/p>\n
<div class=\"container\">\r\n\t<div><p>Lorem Elsass ipsum bredele [...]<\/p><\/div>\r\n\t<div><p>Lorem Elsass ipsum bredele [...]<\/p><\/div>\r\n\t<div><p>Lorem Elsass ipsum bredele [...]<\/p><\/div>\r\n<\/div><\/code><\/pre>\n
En utilisant ce code CSS<\/abbr> je devrais pouvoir afficher mes \u00e9l\u00e9ments les uns \u00e0 c\u00f4t\u00e9 des autres :<\/p>\n
.container {\r\n\twidth: 900px;\r\n}\r\n.container div {\r\n\tdisplay: inline-block;\r\n\twidth: 300px;\r\n}<\/code><\/pre>\n
En effet chaque div<\/code> fait normalement 300px de largeur, comme nous en avons trois nous rentrons pr\u00e9cis\u00e9ment dans les 900px du conteneur.
\nSauf que l’indentation de notre code fait appara\u00eetre un espace blanc (white-space<\/code><\/a>) d’environ 4px entre chaque \u00e9l\u00e9ment.<\/p>\n
Une des solutions est de ne plus indenter la partie du code concern\u00e9e. Cela vous obligerait \u00e0 accepter de ne plus \u00ab\u00a0a\u00e9rer\u00a0\u00bb certaines parties de votre code… pas super pour la lisibilit\u00e9.<\/p>\n
Une autre solution consiste en l’utilisation de commentaires HTML, de cette mani\u00e8re :<\/p>\n
<div class=\"container exemple\"><!--\r\n\t--><div><p>Lorem Elsass ipsum bredele [...]<\/p><\/div><!--\r\n\t--><div><p>Lorem Elsass ipsum bredele [...]<\/p><\/div><!--\r\n\t--><div><p>Lorem Elsass ipsum bredele [...]<\/p><\/div><!--\r\n--><\/div> <\/code><\/pre>\n
Pas super pratique, surtout si pour le code g\u00e9n\u00e9r\u00e9 vous n’avez pas enti\u00e8rement la main dessus (plugins ou fonctions WordPress, ou pas envie de tout modifier).<\/p>\n
La derni\u00e8re solution est de passer par du CSS<\/abbr>.
\nIl nous faut \u00ab\u00a0supprimer\u00a0\u00bb le white-space<\/code><\/a> entre les div<\/code>. Pour cela nous appliquons la valeur nowrap<\/code> \u00e0 cette propri\u00e9t\u00e9 sur le conteneur. Cette valeur \u00e9tant h\u00e9rit\u00e9e, nous restaurons la valeur par d\u00e9faut sur les enfants du conteneur.<\/p>\n
.container {\r\n\twidth: 900px;\r\n\twhite-space: nowrap;\r\n}\r\n.container div {\r\n\tdisplay: inline-block;\r\n\twidth: 300px;\r\n\twhite-space: normal;\r\n}<\/code><\/pre>\n
Aper\u00e7u<\/a><\/p>\n
Edit : Apr\u00e8s l’intervention de Rapha\u00ebl<\/a> j’ai effectu\u00e9 quelques tests qui montrent que la suppression des espaces n’est pas effective. Les \u00e9l\u00e9ments sont bien align\u00e9s mais d\u00e9passent de leur parent. Pourtant la m\u00e9thode permet bel et bien un alignement des \u00e9l\u00e9ments et est comprise par tous les navigateurs que j’ai pu tester (Safari, Chrome, Firefox, IE>7, Opera, sous XP, Vista et Seven)…
\nVoici cependant une solution apport\u00e9e par Rapha\u00ebl (toujours le m\u00eame) sur son espace de jeu : http:\/\/www.ie7nomore.com\/fun\/white-space\/<\/a>, ici l’aspect \u00ab\u00a0root em\u00a0\u00bb (rem) ne nous int\u00e9resse pas (bien que je vous invite \u00e0 d\u00e9couvrir son utilit\u00e9), c’est la simple annulation de la valeur font-size<\/code> sur le parent qui est int\u00e9ressante. Elle a pour effet de supprimer les espaces ind\u00e9sirables, mais vous oblige \u00e0 utiliser une valeur de corps en pixels pour les enfants.
\n<\/b><\/p>\n
<\/span>Une fois ce travail d’alignement effectu\u00e9, il arrivera probablement que le contenu ne soit pas align\u00e9 \u00e0 la vertical comme vous le souhaitez.
\nPour cela je vous rappelle que nous avons la propri\u00e9t\u00e9 CSS<\/abbr> : vertical-align<\/code>.
\nSouvent bien pratique de choisir la valeur top<\/code> pour placer les \u00e9l\u00e9ments en haut de leur conteneur, il vous arrivera probablement de devoir aligner les \u00e9l\u00e9ments entre eux de mani\u00e8re centr\u00e9e (middle<\/code>) ou tout en bas du conteneur (bottom<\/code>).<\/p>\n
Petit exemple pour la route<\/a><\/p>\n
Merci pour votre lecture \ud83d\ude09
\nN’h\u00e9sitez pas si vous avez des exemples ou des contre-exemples d’utilisation…<\/p>\n
\n
Liens utiles<\/h2>\n