フレックスボックス内、アイテムの合間にボーダーラインを挿入したい

Question

いつもお世話になっております。

HTML、CSSを用いて　表のデザインの練習中です。

フレックスボックスを用いて、
リストを横ならびにし、アイテムを中央に揃えるあたりまでは、
サクサク進んでいたのですが、

各.form dl にボーダーラインを挿入しようと試みた所、
うまく行きません。

.form dlはdisplay: flex;になっているので
間に<div>や擬似要素afterで挿入しようと試みた所、
当然ですが横並びになってしまい、　うまく間に入ってくれません。

この場合はどの様な手段が最適でしょうか？
よろしくお願いします。

私の作ったもの↓

お手本↓

<form class="content-wrapper">
    <article class="form">
      <dl>
        <dt>あなたのお名前</dt>
        <dd><input type="text"></dd>
      </dl>
      <dl>
        <dt>フリガナ</dt>
        <dd><input type="text"></dd>   
      </dl>
      <dl>
        <dt>メールアドレス</dt>
        <dd><input type="text"></dd>     
      </dl>
      <dl>
        <dt>電話番号</dt>
        <dd><input type="text"></dd>   
      </dl>
      <dl>
        <dt>お問い合わせ内容</dt>
        <dd><textarea></textarea></dd>
      </dl>
      <p>お客様の個人情報は慎重に取り扱い、ご意見なしに第三者に提供または開示する事はございません。</p>

    <section class="form-button">
      <input id="first" type="button" value="個人情報保護方針についてはこちらをご覧ください">
      <input id="second" type="button" value="同意して確認画面へ">
    </section>
    </form>
    </article>

.form dl {
  display: flex;
  justify-content: center;
}

.form dl dt{
  width: 15%;
  font-weight: bold;
}

.form dl dd{
  width: 50%;
}

.form dl dd input{
  width: 100%;
}

.form dl dd textarea{
  width: 100%;
  height: 100px;
}

Comments

[akkman]

dlに対してborderをあてれば解決できそうですが、どのようにうまくいってませんか?

Answer 1

普通に border-bottom でできそうですが。

とりあえず画像になるべく合わせるなら、下記のような感じで。

.form {
  margin: 0 auto;
  max-width: 800px;
}

.form dl {
  display: flex;
  justify-content: center;
  border-bottom: 1px dotted gray;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.form dl dt{
  width: 25%;
  font-weight: bold;
}

.form dl dd{
  width: 75%;
}

.form dl dd input{
  width: 100%;
}

.form dl dd textarea{
  width: 100%;
  height: 100px;
}

.form p, .form-button {
  text-align: center;
}

Comments

[AmanoEriko]

まさにイメージ通りにする事ができました！

boder-bottomで指定すると
長さが長くなってしまい、長さが指定できないな、、、とグルグル悩んでいましたが
そうですよね、、、
親要素にmax-widthを指定する事で、OKでした。。。

そしてdtをddのwidthも合計１００％になる様に指定する、という事ですよね。

本当に初歩的な質問になってしまい、申し訳ありませんでした。
質問を聞いていただく事、
ご回答をいただく事で、
確かな理解に近づけました。

ありがとうございました！

Answer 2

擬似要素を使ってみてはいかがでしょうか？

.form dl:after {
  content:" ";
  border-bottom:solid 1px #000;
  width:100%;
  position:absolute;
}

.form dl{
position:relative;
}

みたいな感じで。

widthで長さを調整したり、topやleftを指定して位置を調整したりしてみてください。

Comments

[AmanoEriko]

ありがとうございます！
出来ました！

擬似要素と聞くだけでなんだかハードルの高さを感じて
怯えてしまう超初心者なのですが（苦笑）
少し打ち解けられた気がします！