obq********

2022/1/27 20:00

33回答

cssについて質問です。

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、CSS・46閲覧

ベストアンサー

0
oishii_mahou

カテゴリマスター

2022/1/27 20:57

HTML のコードが何も提示されておらず、 著者の横の「タイトルタイトルタイトル」というテキストが、 どんな HTML タグの中に書かれているのかも分からんので、 右寄せにする指定を、 どんな HTML 要素に対して指定するかの判断もできない。 添付された画像と質問の内容からいえることは、 著者の横の「タイトルタイトルタイトル」というテキストを囲っている、 直近の HTML 要素に対して、 CSS で「text-align: right」を指定すればいいだけ。

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

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

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

お礼日時：1/28 14:29

その他の回答（2件）

0
fengxian

カテゴリマスター

2022/1/27 22:39

私なら 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
ybb********

カテゴリマスター

2022/1/27 21:32

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>