Bagaimana untuk menghapuskan gaya tag yang menduduki baris dengan sendirinya dalam css-tutorial css-php.cn

Bagaimana untuk menghapuskan gaya tag yang menduduki baris dengan sendirinya dalam css

WBOY

Lepaskan： 2021-11-24 17:35:54

asal

4562 orang telah melayarinya

Dalam CSS, anda boleh menggunakan atribut paparan untuk menghapuskan gaya label yang menduduki baris yang berasingan Apabila nilai atribut ini adalah "sebaris", label akan ditetapkan untuk dipaparkan sebagai elemen sebaris . Pada masa ini, tiada pemisah baris sebelum dan selepas label, dan sintaks khusus ialah "objek elemen label {display:inline;}".

Bagaimana untuk menghapuskan gaya tag yang menduduki baris dengan sendirinya dalam css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Bagaimana untuk menghapuskan gaya label yang menduduki baris dengan sendirinya dalam css

Sebab mengapa label menduduki baris dengan sendirinya adalah kerana beberapa label ialah elemen peringkat blok Elemen peringkat blok menduduki keseluruhan ruang mendatar elemen induknya (bekas) dan ruang menegak sama dengan ketinggian kandungannya, sekali gus mewujudkan "blok". Jika anda ingin menghalang label daripada menduduki barisnya sendiri, anda hanya perlu menetapkan label sebagai elemen sebaris dan mengalih keluar pemisah baris sebelum dan selepas elemen.

Pada masa ini, anda perlu menggunakan atribut paparan Anda hanya perlu menetapkan nilai atribut paparan label kepada sebaris, yang bermaksud elemen ini akan dipaparkan sebagai elemen sebaris, dan akan ada. tiada garis putus sebelum dan selepas elemen. Ini akan menghapuskan kesan label yang menduduki satu baris.

Contohnya adalah seperti berikut:

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

Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk menghapuskan gaya tag yang menduduki baris dengan sendirinya dalam css

Selepas menambah gaya pada label:

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

Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk menghapuskan gaya tag yang menduduki baris dengan sendirinya dalam css

(Belajar perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Bagaimana untuk menghapuskan gaya tag yang menduduki baris dengan sendirinya dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!