Question

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

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

<!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，我用它来对齐这些图像 iam不发布与图像相关的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;
}

Answer 1

您是否正在寻找此项（您也可以将其应用于文章）：

section
{
  margin-left: 160px;
}

使用css和HTML5定位图像

1 个答案: