Comment éliminer le style des balises occupant une ligne par elles-mêmes en CSS-tutoriel CSS-php.cn

Comment éliminer le style des balises occupant une ligne par elles-mêmes en CSS

WBOY

Libérer： 2021-11-24 17:35:54

original

4594 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut display pour éliminer le style de l'étiquette occupant une ligne distincte. Lorsque la valeur de cet attribut est "inline", l'étiquette sera définie pour être affichée en tant qu'élément en ligne. , il n'y aura pas de saut de ligne avant et après l'étiquette, donc ce ne sera pas exclusif. Une ligne ; la syntaxe spécifique est "objet d'élément d'étiquette {display:inline;}".

Comment éliminer le style des balises occupant une ligne par elles-mêmes en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment éliminer le style des étiquettes occupant une ligne par elles-mêmes en CSS

La raison pour laquelle les étiquettes occupent une ligne par elles-mêmes est que certaines étiquettes sont des éléments de niveau bloc et que les éléments de niveau bloc occupent toute l'horizontale espace de leur élément parent (conteneur), verticalement. L'espace est égal à la hauteur de son contenu, donc un "bloc" est créé. Si vous souhaitez empêcher l'étiquette d'occuper sa propre ligne, il vous suffit de définir l'étiquette comme élément en ligne et de supprimer les sauts de ligne avant et après l'élément.

À ce stade, vous devez utiliser l'attribut d'affichage. Il vous suffit de définir la valeur de l'attribut d'affichage de l'étiquette sur inline, ce qui signifie que cet élément sera affiché en tant qu'élément en ligne et qu'il n'y aura pas de saut de ligne avant. et après l'élément. Cela éliminera l’effet de l’étiquette occupant une seule 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 class="h">测试标签</h3>
    测试文字
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment éliminer le style des balises occupant une ligne par elles-mêmes en CSS

Après avoir ajouté des styles à l'étiquette :

<!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>
<style type="text/css">
    .h{
        display:inline;
    }
</style>
<body>
    <h3 class="h">测试标签</h3>
    测试文字
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment éliminer le style des balises occupant une ligne par elles-mêmes en CSS