Explication détaillée de la façon d'obtenir un alignement aux deux extrémités du CSS

Mots précédents

  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

flex

 Modèle de boîte flexibleflex 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'alignement de l'axe principal pour aligner les deux extrémités de just<a href="http://www.php.cn/wiki/109.html" target="_blank">if<code>just<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a>y-contenty-content Attributsspace-between

justify-content: space-between;

 Si vous souhaitez considérer la compatibilité des trois versions de flex, utilisez le code suivant

 [Note ] Le navigateur IE9 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>

text-align

 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, 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 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 <a href="http://www.php.cn/wiki/978.html" target="_blank">:after<code><a href="http://www.php.cn/wiki/978.html" target="_blank">:after</a> sur l'élément parent, et ce qui en fait un pseudo L'élément est défini sur inline-block et la largeur est définie sur 100%, ce qui é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 des deux extrémités

  Il convient de noter ici que, comme l'espace vide sera analysé comme une nouvelle ligne, vous pouvez définir la hauteur du parent élément height et 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>

colonne

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 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 en avez besoin. pour l'utiliser entre les éléments enfants Lignes verticales, et lorsque la hauteur de la ligne verticale est la même que la hauteur de l'élément enfant, 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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!