0

均等に横並びに配置するために、下記のようにコードを書いたのですがflexが適用されません。もしこのコードをみて改善策がわかる方がいたら教えてください。 
よろしくお願いします。

<nav class="global-nav_items">
    <ul class="nav-list">
        <li><a href="#">menu</a></li>
        <li><a href="#">blog</a></li>
        <li><a href="#">acess</a></li>
    </ul>
</nav>
.global-nav_item{
    padding: 40px;
}
.global-nav_item .nav-list{
    display: flex;
    justify-content: center;
}
.global-nav_item .nav-list>li{
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.1em;
    margin-right: 80px;
    list-style: none;
}
.global-nav_item .nav-list> li :last-child{
    margin-right: 0;
}
1
  • 動かないので直してくれというよりも先に, 基礎的なことをまずよく読んで理解することが大切な気がします。フレックスボックス について。 簡単な例の紹介の中の縦並びのソース flexbox0.html。横並びなら section { display: flex;} 追加するだけ
    – oriri
    Commented 2023年9月8日 3:39

1 件の回答 1

0

綴りミスではないでしょうか。
HTMLでは class="global-nav_items"、CSS では .global-nav_item (sがない)となっています。

ブラウザの開発者ツールで .nav-list の要素を調べると display: flex が適用されていないことが確認できます。そのことから、display: flex を含むルールセットのセレクタが間違っている可能性が高く、クラス名の不一致に気づけるかもしれません。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。