Comment implémenter des diviseurs en utilisant CSS

Voici plusieurs façons simples d'implémenter des lignes de démarcation. Personnellement, je préfère la deuxième. J'ai également donné la cinquième façon finale d'écrire une comparaison de 2. Veuillez m'aider ou fournir d'autres bonnes méthodes.

Une seule étiquette implémente la ligne de séparation :

.demo_line_01{
    padding: 0 20px 0;
    margin: 20px 0;
    line-height: 1px;
    border-left: 200px solid #ddd;
    border-right: 200px solid #ddd;
    text-align: center;
}

Avantages : Le code est concis

Utilisation intelligente de la couleur d'arrière-plan pour implémenter la ligne de séparation :

.demo_line_02{
    height: 1px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.demo_line_02 span{
    position: relative;
    top: -8px;
    background: #fff;
    padding: 0 20px;
}

Avantages : Le code est concis et peut s'adapter à la largeur

inline-block pour implémenter la ligne de séparation :

.demo_line_03{
    width:600px;
}
.demo_line_03 b{
    background: #ddd;
    margin-top: 4px;
    display: inline-block;
    width: 180px;
    height: 1px;
    _overflow: hidden;
    vertical-align: middle;
}
.demo_line_03 span{
    display: inline-block;
    width: 220px;
    vertical-align: middle;
}

Avantages : le texte peut être multiligne

Flottant pour implémenter la ligne de séparation :

.demo_line_04{
    width:600px;
}
.demo_line_04{
    overflow: hidden;
    _zoom: 1;
}
.demo_line_04 b{
    background: #ddd;
    margin-top: 8px;
    float: left;
    width: 26%;
    height: 1px;
    _overflow: hidden;
}

Avantages : NUN

Utiliser des caractères pour réaliser des séparateurs :

<p class="demo_line_05">———————————<span>小小分隔线 字符来实现</span>————————————</p>

.demo_line_05{
    letter-spacing: -1px;
    color: #ddd;
}
.demo_line_05 span{
    letter-spacing: 0;
    color: #222;
    margin:0 20px;
}

Avantages : Ce qui précède ne sont que quelques exemples simples de méthodes de séparation. Je le ferai certainement à l'avenir. Il y aura une méthode plus simple et plus claire, j'espère qu'elle pourra aider tout le monde.

Le code est concis. Ce qui précède présente brièvement comment écrire des séparateurs. Il peut y avoir d'autres façons plus appropriées de les écrire. Vous pouvez choisir ce dont vous avez besoin en fonction de l'environnement.

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!