-1

我最近几天对 html5 和 css 很陌生，我玩得很好，但现在我遇到了问题。实际上图像没有正确对齐，在三张图像之后，第四张图像进入第二行，但不在上面的图像下方，而是在菜单/导航下方

我在文章标签之前使用过导航，但是当我使用边框来检查我的文章标签包含多少区域时，导航菜单出现在其中。我有点困惑请帮助 ..这是我的代码

<!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 回答