简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

Comment définir une ligne de séparation verticale en HTML ? Explication du code de la ligne de séparation verticale HTML

不言
Libérer： 2018-10-31 14:14:05
original
27697 Les gens l'ont consulté

Nous savons que les lignes de séparation horizontales HTML sont faciles à mettre en œuvre, il suffit d'utiliser la balise

Cet article vous présentera comment implémenter des lignes de séparation verticales en HTML.

PS : concernant la façon d'implémenter la ligne de séparation horizontale html, vous pouvez lire cet article : "Comment définir la ligne de séparation horizontale html ? Explication des exemples de code pour les lignes de séparation horizontales HTML》

Passons directement à la méthode d'implémentation des lignes de séparation verticales HTML

Il n'existe pas de méthode directe pour implémenter une ligne de séparation verticale en HTML , nous devons donc utiliser d'autres méthodes pour obtenir une ligne de démarcation verticale. Voyons quelles méthodes peuvent obtenir l'effet d'une ligne de démarcation verticale

La première ligne de démarcation verticale Méthode de mise en œuvre : Utilisez le caractères tirets

sur le clavier Le code est le suivant : 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<span>内容</span>|<span>内容</span>
</div>
</body>
</html>
Copier après la connexion

L'effet est le suivant :

Comment définir une ligne de séparation verticale en HTML ? Explication du code de la ligne de séparation verticale HTML

Instructions : Bien que cette méthode soit simple et pratique, elle ne permet pas un bon contrôle.

La deuxième méthode pour implémenter la ligne de démarcation verticale : utiliser la bordure pour implémenter la ligne de démarcation verticale

Le code est le suivant : 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="width:200px;float:left;height:200px;">内容区域</div>
<div style="border:1px solid ;float:left;height:200px;"></div><!--这个div模拟垂直分割线-->
<div style="width:200px;float:left;height:200px;">内容区域</div>
</body>
</html>
Copier après la connexion

L'effet est le suivant :

Comment définir une ligne de séparation verticale en HTML ? Explication du code de la ligne de séparation verticale HTML

La troisième façon d'implémenter des lignes de séparation verticales : utiliser la bordure et le remplissage

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.span1{
padding:12px 6px 200px 6px;
margin-left: 6px;
border-left: 1px solid;
font-size: 0;
}
</style>
</head>
<body>
<div>
<span>内容区域</span>
<span class="span1"></span>
<span>内容区域</span>
</div>
</body>
</html>
Copier après la connexion

effets Comme suit :

Comment définir une ligne de séparation verticale en HTML ? Explication du code de la ligne de séparation verticale HTML

Remarque : le remplissage est utilisé ici principalement pour contrôler la hauteur des lignes verticales.

La quatrième méthode pour implémenter des lignes de séparation verticales : utilisez des images d'arrière-plan pour implémenter des lignes de séparation verticales

Dans cette méthode, vous pouvez choisir différentes couleurs et différents types de divisions à des lignes ; cependant, lors de l'ajustement de la taille de l'image, en particulier de la largeur, les bords apparaîtront irréguliers dans une certaine mesure. De plus, pour ajuster la couleur de l'image, vous devez la changer pour une autre image, ce qui n'est pas propice. à des ajustements ultérieurs. Je n’en dirai donc pas beaucoup plus. Les amis intéressés peuvent l’essayer eux-mêmes.

Cet article se termine ici. Pour un contenu plus passionnant, vous pouvez suivre le site Web php chinois tutoriel HTML ! ! !

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!

Étiquettes associées：
竖直分割线
source：php.cn
Article précédent：Quels sont les éditeurs HTML ? Recommandés 4 meilleurs éditeurs HTML Article suivant：Que signifie div ? Comment utiliser les balises div
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Supprimer les guillemets des chaînes dans ReactJS : Guide Je viens de commencer à apprendre JavaScript. J'ai un paragraphe que j'ai divisé en utilis...
Depuis 2023-09-17 23:46:44
0
1
200
Existe-t-il un moyen uniquement CSS de couper des mots sur des caractères spécifiques autres que des espaces ? Si un mot (par exemple THIS_PHRASE_HERE) déborde du div qu'il contient (largeur fixe), je ...
Depuis 2023-09-10 20:24:04
0
2
280
Partagez comment créer des lignes verticales J'ai une liste d'informations de contact comme celle-ci : Exemple comment créer une ligne ...
Depuis 2023-09-07 22:54:19
0
1
265
Comment créer une limite de section hybride droite/incurvée en utilisant SVG ou CSS ? Pour ma candidature, je crée une page d'inscription avec des limites de section non standa...
Depuis 2023-09-02 11:35:13
0
1
298
La ligne de séparation ne s'affiche pas après la saisie du séparateur. ---Ne pas afficher la ligne de démarcation après avoir entré le séparateur
Depuis 2022-10-20 14:46:30
0
1
392
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！