r66  2021/04/11更新

要素を横に並べて表示

CSS

下記のように縦に並んでいる要素を横並びにしたい

<ul>
    <li>要素</li>
    <li>要素</li>
    <li>要素</li>
</ul>


方法

displayプロパティを使用

手順 1 :

・横並びにしたい要素の親要素にclassを指定

<ul class = "test">
    <li>要素</li>
    <li>要素</li>
    <li>要素</li>
</ul>

手順 2 :

・対象のclassにdisplayプロパティをflexに指定

.test {
    display: flex ;
  }

タイトルとURLをコピーしました