Question

我正在尝试将填充应用于列表的所有元素，但由于某种原因，它仅适用于第一个元素。那是怎么回事？如果是这样，我如何将样式应用于列表中的所有元素？

这是我目前的代码。 10px填充仅适用于第一个元素。我希望它应用于列表中的所有元素：

<c:forEach items="${list}" var="child" varStatus="status">
  <div id="${status.count}" style="padding-top: 10px;">

  </div>
</c:forEach>

我尝试将上面的代码更改为

 <c:forEach items="${list}" var="child" varStatus="status">
      <div class = "itemWithPadding">

      </div>
    </c:forEach>

在我的css文件中，我有以下内容：

 .itemWithPadding {
      padding-top: 10px;
    }

呈现的html如下所示：

<div class="itemWithPadding"> -stuff inside- </div> 
<div class="itemWithPadding"> -stuff inside- </div> 
<div class="itemWithPadding"> -stuff inside- </div>

我当然从html源代码中剥离了div标签内的内容。但是如果<div>中的内容是诊断问题所必需的，我可以完全按照它的呈现方式发布它。

Answer 1

从float: left和.itemWithPadding内删除所有<div/>内联样式。请参阅此Fiddle。

问题是，块元素会忽略浮动的子元素，因此.itemWithPadding只有<font/>元素的高度。里面浮动的div被忽略了。如果您已删除padding，则它们会重叠。

另一种方法是使用

使外部div尊重浮动内容

.itemWithPadding:after {
    content: '.';
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

这是Fiddle。

顺便说一句：您不应该使用<font/>标签。你应该考虑从如何编写HTML和CSS代码的好教程开始。将来会为你节省很多时间。

Answer 2

给它一个CSS类来应用你的padding-top。

<style type="text/css">
    .itemWithPadding {
      padding-top: 10px;
    }
</style>

<c:forEach items="${list}" var="child" varStatus="status">
  <div id="${status.count}" class="itemWithPadding">

  </div>
</c:forEach>

Answer 3

您可以使用“class”代替“id”来填充以应用于所有元素。

在HTML中，您可以为所有div提供相同的“类”，例如

<div class="padding">

表示您希望具有相同填充的所有元素。

在css中给出

.padding{padding-top:10px;}

CSS属性padding-top仅适用于列表的第一个元素。我如何申请所有元素？

3 个答案: