cssについて質問です。

画像
補足

すみません。HTMLコードです。 <div class="text"> <p class="title">タイトルタイトルタイトル</p> <dl> <dt>著者</dt> <dd>タイトルタイトルタイトル</dd> <dt>出版社</dt> <dd>タイトルタイトルタイトル</dd> <dt>発行年</dt> <dd>タイトルタイトルタイトル</dd> </dl> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

HTML、CSS46閲覧

ベストアンサー

0

この返信は削除されました

ThanksImg質問者からのお礼コメント

できました!ご丁寧にありがとうございます!!

お礼日時:1/28 14:29

その他の回答(2件)

0

私なら section 要素と 何らかの見出し要素を使います。 ● CSS section.book {width: 500px; margin: auto;} .book dl {display: flex; justify-content: space-between; flex-wrap: wrap; width: 400px; border: silver solid 1px;} .book dt {width: 150px; margin-left: 10px;} .book dd {width: 220px; margin-left: 0; margin-right: 10px;} .book dt:first-child {letter-spacing: 1em;} .book dd:nth-child(2) {text-align: right;} ●HTML <section class="book"> <h3>書名書名書名書名書名書名書名書名書名書名</h3> <dl> <dt>著者</dt> <dd>○○ ○○</dd> <dt>出版社</dt> <dd>●●出版</dd> <dt>発行日</dt> <dd>YYYY/MM/DD</dd> </dl> <p> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </p> </section>

0

obq********さん >・・・・・著者の横の「タイトルタイトルタイトル」を右寄せに・・・・・・・・ ご参考に↓ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box{ width:600px; } dl{ width:600px; display:flex; flex-wrap:wrap; justify-content: space-between; padding:16px 0; border-top:1px #dedede solid; border-bottom:1px #dedede solid; } dt{ width:25%; } dd{ width:50%; text-align:right; } </style> </head> <body> <div class="box"> <h2>タイトルタイトルタイトル</h2> <dl> <dt>著者</dt> <dd>タイトルタイトルタイトル</dd> <dt>出版社</dt> <dd>タイトルタイトルタイトル</dd> <dt>発行年</dt> <dd>タイトルタイトルタイトル</dd> </dl> <div> テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </div> </div> </body> </html>