Comment réparer deux balises en HTML sans les envelopper-tutoriel HTML-php.cn

Comment réparer deux balises en HTML sans les envelopper

WBOY

Libérer： 2021-11-25 10:08:37

original

5808 Les gens l'ont consulté

Méthode : 1. Utilisez l'attribut style pour définir le style "d'affichage" pour l'étiquette, avec la syntaxe ""; float" pour l'étiquette, avec la syntaxe "< ;Tag style="float:left;">".

Comment réparer deux balises en HTML sans les envelopper

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

Comment réparer deux balises en HTML sans sauts de ligne ?

1 En HTML, les balises de type bloc ajouteront automatiquement des sauts de ligne des deux côtés par défaut. Mais ce n’est pas le cas en ligne.

Utilisez simplement l'attribut style de la balise pour ajouter le style "display:inline;" à la balise. Examinons-le à travers un exemple. L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h3 style="display:inline;">测试标签1</h3>
    <h3 style="display:inline;">测试标签2</h3>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment réparer deux balises en HTML sans les envelopper

Si l'attribut style n'est pas défini pour la balise Si tel est le cas, le résultat de sortie est le suivant :

Comment réparer deux balises en HTML sans les envelopper

De cette façon, les deux étiquettes sont corrigées et affichées sans sauts de ligne.

2. Utiliser le style "float:left;" de l'attribut styl pour définir l'élément flottant à gauche peut également corriger les deux éléments et les afficher sans retour à la ligne. L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h3 style="float:left;">测试标签1</h3>
    <h3 style="float:left;">测试标签2</h3>
</body>
</html>

Copier après la connexion

Résultat de sortie :

. Comment réparer deux balises en HTML sans les envelopper