###navのliとliの間に入れる「|」区切り線を改行のタイミングで消したい
下記のように、navの間に区切り線を入れているのですが、widthの伸び縮みがある際に行の両端の区切り線を消したいです。
(例)
「現在」
1|2|3|4|5
|6|7|8|9
|10|11
↓
「理想」
1|2|3|4|5
6|7|8|9
10|11
###該当のソースコード
html
1 <nav> 2 <ul> 3 <li><a href="/base/">xxxxxxを見る</a></li> 4 <li><a href="/treatment/">xxxxxxxを見る</a></li> 5 <li><a href="/interview/">xxxxxxを聞く</a></li> 6 <li><a href="/search/">xxxxxxxxを探す</a></li> 7 <li><a href="/useful/">xxxxを知る</a></li> 8 <li><a href="/supervision/">プロフィール</a></li> 9 </ul> 10 </nav>
css
1 ul 2 text-align: center 3 li+li 4 display: inline-block 5 border-left: 1px solid $color-gray 6 padding-left: 8px 7 li a 8 color: $color-gray 9 text-decoration: underline
###試したこと
上記のように隣接セレクタでborder-leftを使って区切り線を表示しているのですが、
改行されるタイミングでどうしても左端にborderが残ったままになってしまいます。
(例)
1|2|3|4|5
|6|7|8|9
|10|11
↓
1|2|3|4|5
6|7|8|9
10|11
よろしくお願いします><
ーーーーーーーーーーーーーーーーーーーーーーーーーー
2017.06.14更新
【解決しました!!】
css
1 ul 2 text-align: center 3 li 4 border-right: 1px solid $color-gray 5 display: inline 6 padding-right: 8px 7 &:last-child 8 border-right: none 9 a 10 color: $color-gray 11 display: inline-block 12 text-decoration: underline
隣接セレクタではなく、liをinlineにして、中のaタグにinline-blockを設定したらいけました!
みなさまありがとうございました!!
回答4件
あなたの回答
tips
プレビュー