0

我想知道您是否可以将清除样式效果应用于一堆内联元素？

我的问题是我正在使用一组同级 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 的情况下这是否可行？

非常感谢任何输入，

瑞克

4

3 回答 3

2

我不确定我是否得到了您想要实现的目标，以及为什么必须将 div 显示为内联元素，但您可以尝试使用 inline-block：

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

否则你为什么不只是漂浮：离开它们并清除它们？

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

没有测试它，所以它可能不起作用。如果您可以详细说明为什么将 div 显示为内联元素，那将有所帮助！谢谢

于 2012-06-01T11:16:30.193 回答
1

您可以使用伪块元素清除 Inline-Element

.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-19T14:27:23.770 回答
0

您可以使用 jQuery append 将文本添加到每个 div。

附加（）

于 2012-06-01T11:06:18.313 回答