html - 列表中的每一个附加项目都与一个额外的缩进级联

Question

我正在尝试重复 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>

有什么帮助吗？

谢谢！

score 2 · Accepted Answer

您反复打开<div id="breadnews">and <div class="box">，但您也从不关闭。

对于初学者，ID 必须是唯一的，因此您可能不想复制粘贴该<div id="breadnews">行。之后，只需</div>在每个块之后添加，你应该会很好。

另外，请正确使用 JSFiddle 。当有完美可用的 CSS 和 JS 框时，不要将所有内容都塞进 HTML 框中。最后，是<!DOCTYPE html>，不是<doctype! html>。

score 0 · Accepted Answer

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）。

score 0 · Accepted Answer

0

您<div class="box">的 's 没有关闭。，请参阅：

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

于 2013-04-25T02:59:52.470 回答

html - 列表中的每一个附加项目都与一个额外的缩进级联

3 回答 3

Related

Reference