Heim >Web-Frontend >Front-End-Fragen und Antworten >So erreichen Sie eine horizontale Textanordnung in CSS

So erreichen Sie eine horizontale Textanordnung in CSS

藏色散人
藏色散人Original
2021-07-22 11:36:5212183Durchsuche

So implementieren Sie eine horizontale Textanordnung in CSS: Erstellen Sie zunächst eine HTML-Beispieldatei und verwenden Sie schließlich das Attribut „writing-mode: horizontal-tb;“.

So erreichen Sie eine horizontale Textanordnung in CSS

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Wie realisiere ich eine horizontale Textanordnung in CSS? „CSS implementiert horizontale/vertikale Textanordnung.“

horizontal-tb

Horizontal anordnen

vertikal-rl

Vertikal anordnen, von rechts nach links

vertikal-lrVertikal anordnen, von links nach rechtsZum Beispiel: html: css: Erfolgseffekt: Empfohlenes Lernen: „
<p class="textBox">
    <h1>horizontal-tb:横向排列</h1>
    <h1>vertical-rl:纵向排列,从右到左</h1>
    <h1>vertical-lr:纵向排列,从左到右</h1></p>
    <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>
CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine horizontale Textanordnung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn