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显示为内联元素，但您可以尝试使用内联块：

.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()

为内联元素添加“清除”效果

3 个答案: