列表上的每個附加項目都與一個額外的縮進級聯

我想重複一個div .box（5）次（現在在每個框中使用相同的確切材質，將會更改內容），並且每行都更加縮進比下一個。列表上的每個附加項目都與一個額外的縮進級聯

這裏是我的代碼的鏈接：http://jsfiddle.net/infoed/DN8x4/1/：

<DOCTYPE! html> 
<html> 

<head> 
    <title> Breaditt </title> 
    <style> 

html, body { 
font-family: sans-serif; 
margin: 0; 
padding: 0; } 


#logobar { 
background: rgb(206, 211, 255); } 


#logobar ul { 
list-style-type: none; 
margin: 40; 
padding: 40; } 

#logobar li { 
display: inline; 
padding: 20; 
font-size: 52; 
font-family: Comic sans MS;} 

.box { 
margin-left: 50px; 
width: 650px; 
height: 80px; 
display: inline-block; } 

.box .headline { 
font-size: 18px; 
color: black; 
list-style-type: none; 
display: inline-block; } 

.box .submitted { 
display: inline-block; } 

.box h { 
display: inline-block; } 

.box img { 
float: left; 
margin-right: 10px; 
} 

.box { 
clear:both; 
} 




    </style> 
</head> 


<body> 

    <div id="logobar"> 
     <ul> 
     <li>Breaditt: Bread News Aggregator</li> 

     <li><img src="img/logo.jpg" alt="breaditt cat" width="250" height="200"></li> 
     </ul> 
    </div> 


    <div id="breadnews"> 
     <div class="box"> 
     <img src="img/counter.jpg" alt=counter width="75" height="75" /> 
     <img src="img/bread.jpg" alt=article-logo width="75" height="75" /> 
     <div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> </div> 
     <div class="submitted"><h>submitted 2 days ago by Alex Doggrowski</h> </div> 
     <div class="share"><h>14,400 Comments. Share Save hide report</h> </div> 

     <div id="breadnews"> 
     <div class="box"> 
     <img src="img/counter.jpg" alt=counter width="75" height="75" /> 
     <img src="img/bread.jpg" alt=article-logo width="75" height="75" /> 
     <div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> </div> 
     <div class="submitted"><h>submitted 2 days ago by Alex Doggrowski</h> </div> 
     <div class="share"><h>14,400 Comments. Share Save hide report</h> </div> 

     <div id="breadnews"> 
     <div class="box"> 
     <img src="img/counter.jpg" alt=counter width="75" height="75" /> 
     <img src="img/bread.jpg" alt=article-logo width="75" height="75" /> 
     <div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> </div> 
     <div class="submitted"><h>submitted 2 days ago by Alex Doggrowski</h> </div> 
     <div class="share"><h>14,400 Comments. Share Save hide report</h> </div> 

     <div id="breadnews"> 
     <div class="box"> 
     <img src="img/counter.jpg" alt=counter width="75" height="75" /> 
     <img src="img/bread.jpg" alt=article-logo width="75" height="75" /> 
     <div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> </div> 
     <div class="submitted"><h>submitted 2 days ago by Alex Doggrowski</h> </div> 
     <div class="share"><h>14,400 Comments. Share Save hide report</h> </div> 

     <div id="breadnews"> 
     <div class="box"> 
     <img src="img/counter.jpg" alt=counter width="75" height="75" /> 
     <img src="img/bread.jpg" alt=article-logo width="75" height="75" /> 
     <div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> </div> 
     <div class="submitted"><h>submitted 2 days ago by Alex Doggrowski</h> </div> 
     <div class="share"><h>14,400 Comments. Share Save hide report</h> </div> 



     </div> 


</body> 

</html>

任何幫助嗎？

謝謝！

來源

2013-04-25 user2105276

你反覆打開<div id="breadnews">和<div class="box">，但你永遠不會關閉。

對於初學者，ID必須是唯一的，因此您可能不想複製粘貼<div id="breadnews">行。之後，在每個街區之後加上</div>，你應該很好。

另外，請正確使用JSFiddle 。當有完美可用的CSS和JS框時，不要將所有內容都放在HTML框中。最後，它是<!DOCTYPE html>，而不是<doctype! html>。

來源

2013-04-25 02:54:36

好吧，我固定DOCTYPE！並且會在下一次將CSS樣式放入CSS框中。這是我第一次使用該服務。謝謝您的幫助。我關閉了每個div，並正確列出。 – user2105276 2013-04-25 02:57:11

我沒有獎勵ID必須是唯一的。我認爲id =「breadnews」是指每個項目都是「新聞箱」不是？ – user2105276 2013-04-25 02:57:41

「ID」代表源自「身份」的「身份」，意思是「一」。也許你打算在CSS中使用'class =「breadnews」'（和'.breadnews'）來定義一個可能有多個元素的元素類型。 – 2013-04-25 02:58:42

Kolink的所有觀點都是正確的。下面是一個更新的小提琴：

http://jsfiddle.net/DN8x4/4/

<div id="logobar"> 
     <ul> 
     <li>Breaditt: Bread News Aggregator</li> 

      <li><img src="img/logo.jpg" alt="breaditt cat" width="250" height="200" /></li> 
     </ul> 
    </div> 


    <div id="breadnews"> 
     <div class="box"> 
     <img src="img/counter.jpg" alt=counter width="75" height="75" /> 
     <img src="img/bread.jpg" alt=article-logo width="75" height="75" /> 
     <div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> </div> 
     <div class="submitted"><h>submitted 2 days ago by Alex Doggrowski</h> </div> 
      <div class="share"><h>14,400 Comments. Share Save hide report</h> </div></div> 

     <div id="breadnews"> 
     <div class="box"> 
     <img src="img/counter.jpg" alt=counter width="75" height="75" /> 
     <img src="img/bread.jpg" alt=article-logo width="75" height="75" /> 
     <div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> </div> 
     <div class="submitted"><h>submitted 2 days ago by Alex Doggrowski</h> </div> 
      <div class="share"><h>14,400 Comments. Share Save hide report</h> </div></div> 

     <div id="breadnews"> 
     <div class="box"> 
     <img src="img/counter.jpg" alt=counter width="75" height="75" /> 
     <img src="img/bread.jpg" alt=article-logo width="75" height="75" /> 
     <div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> </div> 
     <div class="submitted"><h>submitted 2 days ago by Alex Doggrowski</h> </div> 
      <div class="share"><h>14,400 Comments. Share Save hide report</h> </div></div> 

     <div id="breadnews"> 
     <div class="box"> 
     <img src="img/counter.jpg" alt=counter width="75" height="75" /> 
     <img src="img/bread.jpg" alt=article-logo width="75" height="75" /> 
     <div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> </div> 
     <div class="submitted"><h>submitted 2 days ago by Alex Doggrowski</h> </div> 
      <div class="share"><h>14,400 Comments. Share Save hide report</h> </div></div> 

     <div id="breadnews"> 
     <div class="box"> 
     <img src="img/counter.jpg" alt=counter width="75" height="75" /> 
     <img src="img/bread.jpg" alt=article-logo width="75" height="75" /> 
     <div class="headline"><a href="http://breadcats.tumblr.com">Website dedicated to cats with bread</a> </div> 
     <div class="submitted"><h>submitted 2 days ago by Alex Doggrowski</h> </div> 
      <div class="share"><h>14,400 Comments. Share Save hide report</h> </div> 



     </div>

的標記仍然需要一些工作（例如固定重複的ID）。。

來源

2013-04-25 02:57:24

你<div class="box">的不是封閉的，請參閱：

http://jsfiddle.net/DN8x4/5/

來源

2013-04-25 02:59:52

列表上的每個附加項目都與一個額外的縮進級聯

回答

相關問題