css怎么实现文字横排

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