css - インライン要素に「クリア」効果を追加する

Question

一連のインライン要素にクリアリングスタイルの効果を適用できるかどうか疑問に思いました。

私の問題は、兄弟のdiv要素のセットを操作しているため、コンテナまたは親要素にいかなる種類のブロック表示も適用できないことです。

問題のコードは次のとおりです（残念ながら、HTMLは変更できず、CSSのみが変更されます）。

<div class="form-item form-type-checkbox form-item-alert-option-1">...</div>
Send alert
<div class="form-item form-type-select form-item-alert-time-period-1">...</div>
day(s) from completion date
<div class="form-item form-type-checkbox form-item-alert-option-2">...</div>
Send alert
<div class="form-item form-type-select form-item-alert-time-period-2">...</div>
day(s) from completion date

「...」マークが付いている入力およびラベルのコンテンツがさらにあることに注意してください。ただし、大きすぎて質問には関係ありません。

私が適用しているCSSは次のとおりです。

.form-item {
    display: inline;
}

上記のサンプルでは、​​各クラス番号「1、2など」で表される新しい行が必要です。

HTMLを変更せずにこれは可能ですか？

どんな入力でも大歓迎です、

リック

Answer 1

達成したいことと、divをインライン要素として表示する必要がある理由が正確にわかっているかどうかはわかりませんが、inline-blockを試してみることができます。

.form-item {
    display: inline-block;
    clear: both;
}

そうでなければ、なぜあなたはただ浮かんでみませんか：それらを残してそれらをクリアしますか？

.form-item {
    float: left;
    clear: both;
}

まだテストしていないので、動作しない可能性があります。divをインライン要素として表示する理由について詳しく説明できれば、それは役に立ちます。ありがとう

Answer 2

疑似ブロック要素を使用してインライン要素をクリアできます

.form-item {
  display: inline;
}
.clear-before::before {
    content:' ';
    display: block;
    height: 0;
    border-bottom:1px solid red;
}

<div class="form-item form-type-checkbox form-item-alert-option-1">[[Form]]</div>
Send alert
<div class="form-item form-type-select form-item-alert-time-period-1">[[Form item]]</div>
day(s) from completion date
<div class="form-item form-type-checkbox form-item-alert-option-2 clear-before">[[New Line Form Element]].</div>
Send alert
<div class="form-item form-type-select form-item-alert-time-period-2">[[Form Element]]</div>

Answer 3

jQuery appendを使用して、各divにテキストを追加できます。

append（）