ホーム>source

下の図のようなナビゲーションバーが欲しいのですが、フレックスアイテムと、ロゴの下の説明のような段落の問題に直面しています。写真とまったく同じに見える方法はありますか?

ウィズウィズ
ウィズウィズ

#container { overflow: auto; padding: 0 20px; background: #fff; height: 120px; display: flex; justify-content: space-between; align-items: center; } #container a { color: rgb(0, 0, 0); } #container h1 { margin-left: 20px; } #container ul { list-style: none; display: flex; align-items: center; margin-right: 10rem; } #container ul li a { color: rgb(0, 0, 0); /* margin: 0 1px; */ padding: 47px; font-size: 20px; } #container ul li a:hover { background: #f4f4f4; } /* Showcase */ #showcase { background: url(../IMG/man.jpg) no-repeat center center/cover; height: 87.2vh; } #showcase-content { display: flex; justify-content: center; align-items: center; position: absolute; top: 700px; left: 0; right: 0; bottom: 0; }
あなたの答え
  • 解決した方法 # 1

    ネストされた列が必要です:

    ウィズウィズ
    
    ウィズウィズ
    

  • 解決した方法 # 2

    flexbox-headerには2つのサブ要素があります。ナビゲーションに別のフレックスボックスを使用します。

    ウィズウィズ
    
    ウィズウィズ
    

    #container { overflow: auto; padding: 0 20px; background: #fff; height: 120px; display: flex; justify-content: space-between; align-items: center; } #container a { color: rgb(0, 0, 0); } #container h1 { margin-left: 20px; } #container ul { list-style: none; display: flex; align-items: center; margin-right: 10rem; } #container ul li a { color: rgb(0, 0, 0); /* margin: 0 1px; */ padding: 47px; font-size: 20px; } #container ul li a:hover { background: #f4f4f4; } .flex-col { display: flex; flex-direction: column; }

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ python - パンダ:他の行を調べて欠損値を埋める