CSS aligné

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 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>

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 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>

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 à 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 !