横並びメニューの両端に縦の区切り線を入れたい場合、隣接セレクタを使わないと真ん中のメニューの線が太くなることまでは調べてやってみたのですが、思うようにならないです。(ホームの右側とサイトマップの右側の線です)
解説していただけないでしょうか?
自分の書いたコードは以下の通りです。
HTML
1コード 2<footer> 3 4 <div class="footer-nav clearfix"> 5 <ul> 6 <li><a href="/index.html">ホーム</a></li> 7 <li><a href="#">サイトマップ</a></li> 8 <li><a href="#">プライバシーポリシー</a></li> 9 </ul> 10 </div> 11
css
1コード 2footer { 3 border-top: solid 3px black; 4 background-color: #f5f5f5; 5} 6.footer-nav { 7 border-bottom: solid 0.5px gray; 8 width: 100%; 9 padding-bottom: 9px; 10 11} 12.footer-nav li { 13 float: left; 14 border-left: 1px solid gray; 15 border-right: 1px solid gray; 16 17} 18.footer-nav li+ .footer-nav li { 19 border-left: 0; 20 border-right: 1px solid gray; 21 22 23} 24 25 26.footer-nav a { 27 color: black; 28 padding: 15px; 29 font-size: 14px; 30 31} 32.footer-nav a:hover { 33 list-style: none; 34 background-color: lightgray; 35 36} 37.clearfix::after { 38 display: block; 39 content: ""; 40 clear: both; 41} 42 43
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/12/03 09:12