Q&A
前提・実現したいこと
ホームページ作成の学習をしているのですが、３つあるlistの右側の部分だけ空白を入れたいのですが、一番簡単な書き方がいまいち分かりません。
該当のソースコード
HTML
1ソースコード 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="utf-8"> 6 <title>XD</title> 7 <link rel="stylesheet" href="css/styles.css"> 8</head> 9 10<body> 11 <header> 12 <div class="header"> 13 <div class="header-logo"> 14 <h1>LOGO</h1> 15 </div> 16 <nav> 17 <ul> 18 <li><a href="">Home</a></li> 19 <li><a href="">About</a></li> 20 <li class="aaa"><a href="">Contact</a></li> 21 </ul> 22 </nav> 23 </div> 24 </header> 25</body> 26</html>
CSS
1body { 2 margin: 0; 3 padding: 0; 4} 5 6.header { 7 background: #EFA358; 8 display: flex; 9 justify-content: space-between; 10 width: 1366px; 11 height: 80px; 12} 13 14.header-logo { 15 padding-left: 183px; 16 color: #FFFFFF; 17 /* font-size: 28px; */ 18} 19 20.aaa { 21 padding-right: 183px; 22} 23 24nav ul { 25 list-style: none; 26 margin: 0; 27 padding: 0; 28 display: flex; 29} 30 31/* nav li { 32 padding-right: 183px; 33} */ 34 35nav a { 36 color: #FFFFFF; 37 font-size: 20px; 38 width: 100px; 39 text-align: center; 40 line-height: 80px; 41 display: block; 42 text-decoration: none; 43} 44 45 /* nav a:hover { 46 background: #eee; 47 } */
試したこと
cssでliをpadding指定したが全体が反映されてしまうので、３つめのliに対してclass指定したら出来るが、これが一番簡単な書き方なのかどうか。
補足情報（FW/ツールのバージョンなど）
windows10、VScode
回答1件
0
ベストアンサー
最後のliにだけ当てたい場合は次のような記述でスタイルを当てられます。
HTML側でクラスを指定する必要もありません。
nav li:last-child { padding-right: 183px; }
これが自分が知る中で一番かんたんな記述だと思います。
投稿2021/07/31 12:00
総合スコア299
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2021/07/31 12:07