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

Jadual Kandungan

测试标签

Rumah

hujung hadapan web

tutorial css

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

Nov 24, 2021 pm 05:35 PM

css

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 id="测试标签">测试标签</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 id="测试标签">测试标签</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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn