Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk mencapai susunan teks mendatar dalam css

Bagaimana untuk mencapai susunan teks mendatar dalam css

藏色散人
Lepaskan: 2023-01-07 11:44:58
asal
12187 orang telah melayarinya

Cara melaksanakan susunan teks mendatar dalam CSS: Mula-mula buat fail sampel HTML, kemudian buat tag p dan akhirnya gunakan atribut "writing-tb;" untuk mencapai susunan teks mendatar;

Bagaimana untuk mencapai susunan teks mendatar dalam css

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

Bagaimana untuk merealisasikan susunan teks mendatar dalam css?

css untuk menyusun teks secara mendatar/menegak

mod penulisan: Mod penulisan

属性值 效果
horizontal-tb 横向排列
vertical-rl 竖向排列,从右到左
vertical-lr 竖向排列,从左到右

Contoh adalah seperti berikut:

html:

<p class="textBox">
    <h1>horizontal-tb:横向排列</h1>
    <h1>vertical-rl:纵向排列,从右到左</h1>
    <h1>vertical-lr:纵向排列,从左到右</h1></p>
Salin selepas log masuk

css:

    <style>
        .textBox h1{
            width: 200px;
            height: 200px;
            margin: 10px 10px;
            padding: 10px;
            float: left;
        }
        .textBox h1:nth-of-type(1){
            writing-mode: horizontal-tb;
            background-color: #42b983;
        }
        .textBox h1:nth-of-type(2){
            writing-mode: vertical-rl;
            background-color: #42a8b9;
        }
        .textBox h1:nth-of-type(3){
            writing-mode: vertical-lr;
            background-color: #81b9aa;
        }
    </style>
Salin selepas log masuk

Kesan pencapaian:
Bagaimana untuk mencapai susunan teks mendatar dalam css

Pembelajaran yang disyorkan: "tutorial video css"

Atas ialah kandungan terperinci Bagaimana untuk mencapai susunan teks mendatar dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan