質問: ### 前提・実現したいこと 仕切りのための斜めボーダーを入れて並べたliを、レスポンシブによってliが折り返して表示された際に 各行の初めのボーダーを取り除きたい。 ↓これを リスト1/リスト2/リスト3/リスト4/リスト5 レスポンシブによって リスト1 / リスト2 / リスト3 / リスト4 / リスト や、 リスト1 / リスト2 / リスト3 / リスト4 / リスト5 となるのを、 リスト1 / リスト2 / リスト3 リスト4 / リスト5 リスト1 / リスト2 リスト3 / リスト4 リスト5 にしたい。 ### 該当のソースコード リスト1 リスト2 リスト3 リスト4 リスト4 ### 試したこと javascriptでulの高さを取得し、現在の行数を計算。 その上で各行の初めに対してcssを適用させれば実現できそうですが、 これをコードでどのように書けばいいのかわかりません。 ご指導をお願いできますでしょうか。
回答: 皆様からいただいたアドバイスを参考に以下のソースで実現できました。 ``` リンク1 リンク2 リンク3 リンク4 リンク5 ``` ``` div { overflow: hidden; } ul { margin-left: -20px; } ul li { display: inline; border-left;1px solid #000; margin-left: 10px; padding-left: 10px; } ul li a { display: inline-block; } ``` 各リスト(li)の左側に作ったボーダー+余白を、 1.リスト全体を包んだ要素(div)に「overflow:hidden」をかけ、 2.リスト全体(ul)にネガティブマージンを取ることで、 表示領域から隠します。 斜め線もli要素に斜め線のbackgroundイメージを設定することで実現できました。 x_xさん、liveAsNotesさんありがとうございました。