爲內聯元素添加「清除」效果

我想知道是否可以將清除樣式效果應用於一系列內聯元素？爲內聯元素添加「清除」效果

我的問題是我正在使用一組兄弟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？

任何輸入是非常讚賞，

裏克

來源

2012-06-01 Rick Donohoe

是你的div意味着嵌套清除內聯元素？結束標籤在哪裏？ – Marcin

我已經添加了道歉。這是相當大的一段代碼，我試圖複製所有的錯誤！ –

如果你的'大而無關的'代碼包含任何塊級元素，那麼你不應該使div內聯 - 它是無效的CSS。 – sscirrus

我不知道我有正是你想達到什麼，以及爲什麼你要顯示你的div作爲內聯元素，但你可以使用inline-block的嘗試：

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

否則爲什麼你不漂浮：離開他們並清除他們？

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

還沒有測試過，所以它可能無法正常工作。如果您可以詳細說明爲什麼要將div顯示爲內聯元素，那將有所幫助！感謝

來源

2012-06-01 11:16:30 Luca

內聯塊工作，雖然這是因爲我必須確保元素填滿容器的寬度，並且這樣他們會強制下一行。 –

您可以使用jQuery追加文本添加到每個格。

append()

來源

2012-06-01 11:06:18

我會把你+1回到0，我認爲你的回答沒有意義，但只是因爲我錯過了我的問題中的一些代碼。我已經修復了現在的編輯。 –

@RickDonohoe jQuery append（）沒有解決你的問題。你的問題是關於如何格式化HTML元素的顯示，以便每個新塊出現在新行上; append（）是將內容添加到div的javascript！ – sscirrus

@RickDonohoe我的不好，我想你想在說這句話時加上行號「在上面的例子中，我想要一個由每個班號表示的新行，'1,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>

來源

2016-01-19 14:27:23

爲內聯元素添加「清除」效果

回答

相關問題