CSS屬性padding-top僅適用於列表的第一個元素。我如何適用於所有元素？

我想將填充應用於列表中的所有元素，但由於某種原因它僅適用於第一個元素。這是怎麼回事？如果是這樣，我如何獲得適用於列表中所有元素的樣式？CSS屬性padding-top僅適用於列表的第一個元素。我如何適用於所有元素？

這是我目前的代碼。 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>內的內容對診斷問題是必要的，我可以將其正確呈現。

來源

2013-04-04 SerotoninChase

請不要顯示服務器端代碼。請將您的HTML代碼呈現給我們，並請顯示您的CSS代碼。 – 2013-04-04 19:05:59

所有項目都有定義的填充。 @see http://jsfiddle.net/VrRR9/ – David 2013-04-04 21:16:54

你可以爲你的問題創建一個http://jsfiddle.net嗎？我看不出有什麼理由不應該這樣做。所以小提琴可能會有幫助。 – 2013-04-04 21:17:41

從.itemWithPadding刪除所有float: left內嵌樣式和<div/>裏面裝的。請參閱Fiddle。

問題是，塊元素忽略浮動的子元素，所以.itemWithPadding只有<font/>元素的高度。浮動的div裏面被忽略了。如果您將刪除padding，它們會重疊。

另一種方法是使外層的div使用

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

這裏是一個Fiddle尊重浮動的內容。

順便說一句：你不應該使用<font/>標籤。你應該考慮從一個關於如何編寫HTML和CSS代碼的好教程開始。將來會爲你節省很多時間。

來源

2013-04-04 21:52:31

是的，你是對的，我需要對HTML和CSS進行大量的培訓。可悲的是我只做這件事，因爲沒有人可以做到這一點。我的技能主要是Java，我不太喜歡設計用戶界面。然而，我同意這是沒有理由不學習的東西，並感謝噸解決方案。 – SerotoninChase 2013-04-04 22:10:33

給它一個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-04 18:57:47 David

雖然這是一個更好的解決方案，但我不知道爲什麼它應該工作，如果內聯樣式沒有。我想，那裏有其他的東西是錯的。 – 2013-04-04 19:05:08

我試過了。它仍然只爲第一個元素添加填充。我將發佈呈現的html，以便您獲得更好的主意。 – SerotoninChase 2013-04-04 21:02:16

你可以使用一個「類」而不是「ID」爲上的所有元素被應用填充。

在HTML中，你可以給同一個「類」到所有的div像

<div class="padding">

所有你想擁有相同的填充的元素。

而在CSS給

.padding{padding-top:10px;}

來源

2013-04-04 19:12:34

CSS屬性padding-top僅適用於列表的第一個元素。我如何適用於所有元素？

回答

相關問題