４つのリストを２列ずつに配置して十字型にボーダーをつけてボーダー同士がくっつかないようにある程度空間を空けて配置したいのですがどうしたらいいでしょうか。

2:ID:dHr0fh · 2017-09-28

いまいち質問の意図が分からないのだけど

border-collapse: separate;
border-spacing: 左右上下;

ではあかんの？

http://www.htmq.com/style/border-spacing.shtml

3:ID:主 · 2017-09-28

Re:2
全部囲まずに十字型にして空白をあけたいのですborder-rightとborder-bottomがくっついてしまいます。....説明下手ですみません。

4:ID:dHr0fh · 2017-09-28

Re:3
いや、多分俺の理解する頭脳が足りないだけだ。すまない。
cssの実コードがどうなっているのか、サンプルを貼ってもらえると助かる。

5:ID:rfVlSi · 2017-09-28

ヒント：
box-shadowで線を表現
疑似要素で空白（背景色と同じにして）を作る

ワイは一流CSSerやから余裕

6:ID:4aSBoG · 2017-09-28

まず、お絵描きしたものを貼ってみなさい
たぶん、その日本語じゃわからん

7:ID:主 · 2017-09-29

Re:6
https://imgur.com/k32XJHO

こういう風にしたいのです。

8:ID:主 · 2017-09-29

Re:4
https://imgur.com/NvaLMGH
雑ですがこんな感じにしかできません・・・。

9:ID:主 · 2017-09-29

Re:4
https://imgur.com/k32XJHO
こういう風にしたいのです。

10:ID:4aSBoG · 2017-09-29

Re:7
4つって決まってるんだったら、難易度は低いと思われる。
俺ならば、nth-of-type()を使って個々のborderをセットして、疑似要素で中央の空白を埋めるね。

11:ID:/BIIfX · 2017-09-29

画像でやれば簡単やで^^

12:ID:wDHmIR · 2017-09-30

display:table;やtable-cell、first-childやlast-childを使えば楽勝じゃない？

コメントの受付は終了しました。

#css,html ４つのリストを２列ずつに配置して十字型にボーダーをつけてボーダー同士がくっつかないようにある程度空間を空けて配置したいのですがどうしたらいいでしょうか。