1

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

这是我目前拥有的代码。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>是诊断问题所必需的，我可以完全按照它的呈现方式发布它。

4

3 回答 3

1

从 your和s 里面删除所有的float: left内联样式。看到这个小提琴。.itemWithPadding<div/>

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

另一种方法是通过使用使外部 div 尊重浮动内容

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

这是一个小提琴。

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

于 2013-04-04T21:52:31.783 回答
0

给它一个 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>
于 2013-04-04T18:57:47.580 回答
0

您可以使用“类”而不是“id”来对所有元素应用填充。

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

<div class="padding">

对于您想要具有相同填充的所有元素。

并在 css 中给出

.padding{padding-top:10px;}
于 2013-04-04T19:12:34.527 回答