Q&A
回答ありがとうございます！無事想定通りの挙動になりました！
前提・実現したいこと
ナビゲーションバーのロゴだけ左寄せにしたいです。
発生している問題・エラーメッセージ
ロゴ部分にmargin-right: autoとしているのに変わらない
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="css/style.css"> 7 <link rel="stylesheet" href="css/reset.css"> 8 <title>Title</title> 9</head> 10<body> 11 <header class="header"> 12 <nav class="nav"> 13 <ul class="nav-list"> 14 <li class="nav-item logo"><a href="#">ロゴ</a></li> 15 <li class="nav-item"><a href="#">nav-item</a></li> 16 <li class="nav-item"><a href="#">nav-item</a></li> 17 <li class="nav-item"><a href="#">nav-item</a></li> 18 <li class="nav-item"><a href="#">nav-item</a></li> 19 <li class="nav-item"><a href="#">nav-item</a></li> 20 <li class="nav-item"><a href="#">nav-item</a></li> 21 </ul> 22 </nav> 23 </header> 24</body> 25</html>
CSS
1* { 2 box-sizing: border-box; 3 margin: 0; 4 padding: 0; 5} 6 7.header { 8 width: 100%; 9 height: 10vh; 10} 11 12.nav { 13 width: 70%; 14 height: 100%; 15 margin: 0 auto; 16 display: flex; 17 align-items: center; 18} 19 20.nav-list { 21 display: flex; 22} 23 24.logo { 25 margin-right: auto; 26} 27 28.nav-item { 29 padding: 0 20px; 30}
回答2件
0
hatena19さんも指摘されているように親要素の幅の問題だと思われます。
.nav-list { display: flex; flex-grow: 1; /* flexアイテムのフレックス伸長係数 */ }
投稿2020/11/18 12:57
総合スコア1907
0
ベストアンサー
親要素の幅を指定したらどうでしょうか。
css
1.nav-list { 2 display: flex; 3 width: 100%; /* 追加 */ 4}
投稿2020/11/18 12:34
総合スコア34075
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/18 13:30