Добавление эффекта «Очистка» к встроенным элементам

Мне было интересно, можно ли применить эффект стиля клиринга к набору встроенных элементов?Добавление эффекта «Очистка» к встроенным элементам

Моя проблема заключается в том, что я работаю с набором элементов div 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?

Любой вклад высоко ценится,

Rick

источник

2012-06-01 Rick Donohoe

предназначен быть вложены ваши дивы? Где закрывающие теги? – Marcin

Извинения Я добавил это. Это довольно большой фрагмент кода, я сделал ошибку, пытаясь скопировать все это! –

Если ваш «большой и нерелевантный» код содержит любые элементы уровня блока, вы не должны делать divs inline - это недопустимый CSS. – sscirrus

Я не уверен, что я получил именно то, что вы хотите достичь, и почему вы должны отображать дивы как встроенные элементы, но вы можете попробовать с инлайн-блока:

.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() - это javascript, который добавляет контент в ваши div! – 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

Добавление эффекта «Очистка» к встроенным элементам

ответ

Смежные вопросы