ddタグの2行目にできる回り込みをなくし、インデントを揃えたい。
dl・dt・ddタグを使用してQ&Aを作っています。
ddタグで改行が会った際にテキスト下に回り込んでしまうテキスト部分のインデントを揃えたいです。
特になし
HTML/CSS
<section> <div class="section__inner"> <h2 class="secTitle">Q & A</h2> <p class="secTitle-sub">テキスト</p> <dl class="accordion-menu"> <div> <dt>テキスト</dt> <dd class="indent-1">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </dd> </div> <div> <dt>テキスト</dt> <dd class="indent-1">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </dd> </div> <div> <dt>テキスト</dt> <dd class="indent-1">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト </dd> </div> </dl> </div> </section> ========以下CSSです================================================================ .section__inner{ width: 960px; margin: 0 auto; } dt{ width: 100%; height: 100px; background-color: #edede2; padding: 40px 48px; border-radius: 8px; margin-bottom: 24px; display: flex; align-items: center; } dt::before{ content: "Q"; margin-right: 32px; } dd{ width: 730px; margin: 0 48px 24px; display: none; } dd::before{ content: "A"; margin-right: 34px; } dd.indent-1{ padding-left: 1em; text-indent: -3em; }
試したこと
text-indentプロパティを試してみました。
.indent {
padding-left: 1em;
text-indent: -1em;
}
擬似要素部分がはみ出てしまい、インデントが揃いませんでした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/12/20 01:38