L'alignement aux deux extrémités est très couramment utilisé dans la production de navigation Nav. Cet article présentera en détail les trois méthodes d'implémentation de l'alignement CSS aux deux extrémités
modèle de boîte flexible flex est une méthode de mise en page élastique puissante qui peut contenir la plupart des mises en page. Les effets incluent bien entendu l’alignement. Vous pouvez utiliser l'attribut d'alignement de l'axe principal justify-content
space-between
justify-content: space-between;
Si vous souhaitez considérer la compatibilité des trois versions de flex, utilisez le code suivant
[ Remarque] IE9-Browse L'implémenteur ne prend pas en charge
.justify-content_flex-justify{ -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } <style> body{margin: 0;} ul{margin: 0;padding: 0;list-style: none;} .list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;} .in{background-color: lightblue;padding: 0 10px;} .display_flex{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;} .display_flex > *{display: block;} .justify-content_flex-justify{-webkit-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;} </style> <ul class="list display_flex justify-content_flex-justify"> <li class="in">内容</li> <li class="in">样式</li> <li class="in">行为</li> </ul>
l'alignement horizontal text-align
lui-même a une valeur d'attribut d'alignement des deux extrémités justify
. Cependant, il convient de noter que lorsque vous l'utilisez pour obtenir un alignement aux deux extrémités, vous devez faire attention à l'ajout de caractères d'espacement (y compris les espaces, les nouvelles lignes et les tabulations) entre les éléments pour que cela fonctionne. Puisqu'il y a des sauts de ligne entre les éléments <li>
dans la structure HTML, il n'est pas nécessaire d'ajouter des espaces supplémentaires
Mais juste comme ça, l'élément ne peut pas obtenir l'effet d'aligner les deux extrémités
L'élément doit se remplir. Une seule ligne suffira, comme indiqué ci-dessous. Les éléments qui remplissent une ligne peuvent être alignés aux deux extrémités, tandis que les éléments qui ne remplissent pas une ligne ne peuvent pas être alignés
[text-align-last]
Évidemment, aucune des situations ci-dessus ne se produit les exigences. À ce stade, vous devez utiliser l'attribut text-align-last
, qui est utilisé pour spécifier comment aligner la dernière ligne de texte
Remplacez donc l'attribut text-align
par text-align-last
. Cependant, pour être compatible avec le navigateur IE, vous devez configurer text-align:justify
en même temps. [Remarque] Le navigateur Safari, IOS et androis4.4-browser ne prend pas en charge
<style> body{margin: 0;} ul{margin: 0;padding: 0;list-style: none;} .list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: justify;text-align-last: justify;} .in{background-color: lightblue;padding: 0 10px;display:inline-block;} </style> <ul class="list "> <li class="in">内容</li> <li class="in">样式</li> <li class="in">行为</li> </ul>
[après le pseudo-élément]
L'utilisation de text-align-last
peut obtenir l'effet d'aligner les deux extrémités, mais la compatibilité n'est pas bonne. En définissant le pseudo-élément :after
sur l'élément parent, en définissant inline-block
sur le pseudo-élément et en définissant la largeur à 100%, cela équivaut à ce que le pseudo-élément :after
soit pressé dans la deuxième ligne. En conséquence, l'élément d'origine occupe la première ligne, déclenchant l'effet d'alignement
Il convient de noter ici que, comme l'espace vide sera analysé comme une nouvelle ligne, vous pouvez définir la hauteur de l'élément parent height
, et le masquage de débordement pour résoudre le problème des sauts de ligne redondants
<style> body{margin: 0;} ul{margin: 0;padding: 0;list-style: none;} .list{width: 200px;height: 30px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: justify;} .in{background-color: lightblue;padding: 0 10px;display:inline-block;} .list:after{content:"";width:100%;display:inline-block;} </style> <ul class="list "> <li class="in">内容</li> <li class="in">样式</li> <li class="in">行为</li> </ul>
Des effets similaires peuvent également être obtenus en utilisant une disposition multi-colonnes column
. column-count
définit le nombre de colonnes de l'élément. Dans l'exemple, il y a 3 sous-éléments, il est donc défini comme 3 colonnes. Une attention particulière doit être accordée au fait que les éléments enfants doivent être définis comme éléments de bloc à ce moment-là pour prendre effet
[Remarque] Le navigateur IE9 ne prend pas en charge
<style> body{margin: 0;} ul{margin: 0;padding: 0;list-style: none;} .list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: center;} .col3{-webkit-column-count:3;-moz-column-count:3;column-count:3;} .in{background-color: lightblue;padding: 0 10px;display:block;} </style> <ul class="list col3"> <li class="in">内容</li> <li class="in">样式</li> <li class="in">行为</li> </ul>
Si vous devez l'utiliser entre les éléments enfants Lignes verticales, et lorsque la hauteur de la ligne verticale est la même que la hauteur du sous-élément, utilisez column-rule
pour mettre en œuvre facilement les exigences
<style> body{margin: 0;} ul{margin: 0;padding: 0;list-style: none;} .list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: center;} .col3{-webkit-column-count:3;-moz-column-count:3;column-count:3;} .col-rule{-webkit-column-rule: 1px solid black;-moz-column-rule: 1px solid black;column-rule: 1px solid black;} .in{background-color: lightblue;padding: 0 10px;display:block;} </style> <ul class="list col3 col-rule"> <li class="in">内容</li> <li class="in">样式</li> <li class="in">行为</li> </ul>
Pour Pour plus d'articles sur l'alignement CSS, veuillez faire attention au site Web PHP chinois !