いつもお世話になっております。
HTML、CSSを用いて 表のデザインの練習中です。
フレックスボックスを用いて、
リストを横ならびにし、アイテムを中央に揃えるあたりまでは、
サクサク進んでいたのですが、
各.form dl にボーダーラインを挿入しようと試みた所、
うまく行きません。
.form dlはdisplay: flex;になっているので
間に<div>や擬似要素afterで挿入しようと試みた所、
当然ですが横並びになってしまい、 うまく間に入ってくれません。
この場合はどの様な手段が最適でしょうか?
よろしくお願いします。
HTML
1 2<form class="content-wrapper"> 3 <article class="form"> 4 <dl> 5 <dt>あなたのお名前</dt> 6 <dd><input type="text"></dd> 7 </dl> 8 <dl> 9 <dt>フリガナ</dt> 10 <dd><input type="text"></dd> 11 </dl> 12 <dl> 13 <dt>メールアドレス</dt> 14 <dd><input type="text"></dd> 15 </dl> 16 <dl> 17 <dt>電話番号</dt> 18 <dd><input type="text"></dd> 19 </dl> 20 <dl> 21 <dt>お問い合わせ内容</dt> 22 <dd><textarea></textarea></dd> 23 </dl> 24 <p>お客様の個人情報は慎重に取り扱い、ご意見なしに第三者に提供または開示する事はございません。</p> 25 26 <section class="form-button"> 27 <input id="first" type="button" value="個人情報保護方針についてはこちらをご覧ください"> 28 <input id="second" type="button" value="同意して確認画面へ"> 29 </section> 30 </form> 31 </article>
CSS
1 2 3.form dl { 4 display: flex; 5 justify-content: center; 6} 7 8.form dl dt{ 9 width: 15%; 10 font-weight: bold; 11} 12 13.form dl dd{ 14 width: 50%; 15} 16 17.form dl dd input{ 18 width: 100%; 19} 20 21.form dl dd textarea{ 22 width: 100%; 23 height: 100px; 24} 25
dlに対してborderをあてれば解決できそうですが、どのようにうまくいってませんか?
回答2件
あなたの回答
tips
プレビュー