-1

私はここ数日から html5 と css を初めて使いましたが、今は問題が発生しています。実際には、画像が適切に配置されていません。3 つの画像の後、4 番目の画像が 2 行目に移動しますが、上の画像の下には表示されず、代わりにメニュー/ナビゲーションの下に表示されます

記事タグの前にナビゲーションを使用しましたが、境界線を使用して記事タグに含まれる領域の範囲を確認すると、ナビゲーションメニューが表示されます..私はちょっと混乱していますplz help..ここに私のコードがあります

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta charset="UTF-8">
    <title>Home</title>
    </head>


        <body>
            <header>
                    <hgroup>
                    <h1>The Luxe Collection</h1>
                            <img src="graphics/header.jpg">
                            <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
                    </hgroup>
            </header>
<nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Special Offers</a></li>
            <li><a href="#">Log In</a></li>
            <li><a href="#">Account</a></li>
            <li><a href="#">Basket</a></li>
            <li><a href="#">Checkout</a></li>

        </ul>
</nav>
            <article>
                        <header>
                            <h1>Hello Google user!     Welcome to Luxe Collections. What would you like to do?</h1>
                        </header>

                            <section>
                            <img class="items" src="graphics/item1.jpg">
                            <img class="items" src="graphics/item2.jpg">
                            <img class="items" src="graphics/item3.jpg">
                            <img class="items" src="graphics/item4.jpg">
                            <img class="items" src="graphics/item5.jpg">
                            <img class="items" src="graphics/item6.jpg">
                            <img class="items" src="graphics/item7.jpg">
                            <img class="items" src="graphics/item8.jpg">
                            <img class="items" src="graphics/item9.jpg">
                            <img class="items" src="graphics/item10.jpg">
                            <img class="items" src="graphics/item11.jpg">
                            <img class="items" src="graphics/item12.jpg">
                            </section>

            </article>          

        </body>
</html>

これは、これらの画像の位置合わせに使用している私の CSS です。画像のみに関連する CSS は投稿していません。

nav {
    margin-left:15px;
    padding:0px;
    float:left;
    width:160px;

                }

nav ul {margin:0px;
         padding:0px;
        display:block;} 

nav ul li {margin-left:20px;
         padding:0px;
        list-style:none;
        padding-left:0px;
        line-height:2.5em;
        }

nav ul li a {display:block;
        text-decoration:none;
        font-family:"Kaushan Script";
        color:#CC123B;}

article {
        padding:10px;
        margin:0px;

          }

article header h1 {
                font-family:"Kaushan Script";
                  text-align:center;
                font-size:20px;
                color:#CC123B;
                    }
.items {
display:inline;
padding-right:10px;
margin:10px;
width:180px;
height:200px;
clear:both;
}
4

1 に答える 1

0

これを探していますか（記事にも適用できます）：

section
{
  margin-left: 160px;
}
于 2013-11-13T21:43:10.593 に答える