li要素を2列にしたい

Question

<div class="container">
        <div class="space">
            <h1 class="space-font font-blue font-weight-bold pt-5 pb-3">コワーキングスペース</h1>
            <div class="space-title d-flex flex-row pb-3 pt-3 ">
                <div class="text-center w-75">
                    <img src="img/harbors.png" alt="harbors" class="w-25 mt-4 mb-4">
                    <p>〇〇<br>
                        〇〇</p>
                    <p class="h3 pb-3">〇〇 〇〇</p>
                    <p>〇〇から徒歩3分</p>
                </div>
                <div class="">
                    <div class="space-photo">
                        <!-- <img src="img/cafe.jpg" alt="cafe" class="w-75"> -->
                        <img src="img/cafe.jpg" alt="cafe" class="w-100 pr-3">
                    </div>
                </div>
            </div>
        </div>

        <div class="space">
            <h1 class="space-font font-blue font-weight-bold pt-5 pb-3">講師のスキルアップ</h1>
            <div class="space-title d-flex flex-row pb-3 pt-3">
                <div class="text-left w-50">
                    <h3 class="pl-3 text-left">プログラミング言語</h3>
                    <ul class="text-left">
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>JavaScript</li>
                        <li>PHP</li>
                        <li>JaVa</li>
                        <li>Python</li>
                        <li>Ruby</li>
                        <li>SQL</li>
                    </ul>
                    <ul>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>JavaScript</li>
                    </ul>
                </div>
                <div class="text-center w-75">
                    <h3>インフラ</h3>
                    <ul>
                        <li>ネットワーク</li>
                        <li>Web/APサーバ</li>
                        <li>データベース</li>
                        <li>Docker</li>
                        <li>AWS</li>
                    </ul>
                </div>
            </div>
            <div class="text-center">
                <a style="font-size:35px;" href="#" class=" btn btn-lg active font-write mt-5 mb-5 font-weight-bold"
                    role="button">話しを聞いてみたい</a>
            </div>
        </div>
    </div>

.space {
    background-color: #E4F9FF;
    list-style-position: inside;  /* li要素の・を引き寄せる */
}

.space-font {
    width: 80%;
    margin: 0 auto;
}

.space-title {
    background-color: #ffffff;
    width: 80%;
    margin: 0 auto;
}

.space-photo img {
    display: block;
}

1枚目が現在で2枚目がデザインとなります。
講師のスキルアップ内の部分を2枚目のようにしたいのですが色々試行錯誤しましたが上手くできませんでした。

本当に色々試したのですがどうもできなく教えていただきたいと思います。
質問が大雑把になってしまっていますが現状もうわからなくこのような質問しかできません。

もし良ければ教えていただきたいと思いますのでお手数になりますがよろしくお願い致します。

Comments

[m.ts10806]

色々試行錯誤…はどのようなことをしたのでしょうか。
提示の内容ではliに対する指定がありません。
divで左右に並べるのではダメですか？

[m.ts10806]

「プログラミング言語」と「インフラ」がなってるので理屈としてはそれと同じでは？

[shinpachi]

m.tsさんコメントありがとうございます！

色々試した結果できなかった分の途中結果は削除しました。

具体的に言いますとブロック要素のままでは横に並ばず下に積木のように積んでしまうのでインライン要素に変更しました。
そうした際に横には並びましたが上記のように５列、３列のようにはできませんでした。

text-alignで左右に方向変えたりもしましたが当然ですが要素の端に行ってしまい思うように行かず、
他にも色々試しましたがダメでしたのでこの度は質問させていただきました。

Answer 1

下記のように Flexユーティリティを使用してください。height: 8remの部分はご希望の位置で折り返すように調整してください。

        <ul class="text-left d-flex flex-column flex-wrap" style="height: 8rem">
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
          <li>PHP</li>
          <li>JaVa</li>
          <li>Python</li>
          <li>Ruby</li>
          <li>SQL</li>
        </ul>
 

Comments

[shinpachi]

hatena19さんコメントありがとうございます！
そのままコピーさせていただき無事2列にすることができました！

本当にありがとうございます！

d-flexにしてインライン要素に変更、
flex-columnで横並びにする、
flex-wrapで折り返しにする条件に変更、
heightで折り返す位置の希望の変更するため、

とても簡潔に説明させていただきましたがこのような解釈であっていますでしょうか？

[hatena19]

d-flex でフレックスボックスに指定して、
flex-column で子要素が縦並びになるように指定、ですね。

[shinpachi]

詳細ありがとうございます！
また忘れてしまった際はこちらを読んで次に生かしたいと思います！

本当にありがとうございます！

Answer 2

li要素はブロック要素ですので自動で前後に改行が入ってしまいます。2列にしたい場合はインライン要素にしてください。

ul {
  display: inline-block;
  vertical-align: top;
}

Comments

[shinpachi]

coleste16さんコメントありがとうございます！
先に教えていただいた上記の肩のお教えもあり無事2列にすることができました！

また違う形で質問させていただくかと思いますがその時はよろしくお願い致します！！