html - 内联列表缩进 | 内联列表缩进

我正在使用1280px宽的屏幕进行开发，尽管我所显示的图片仅相加为1264px，但最后一个不在线显示，而是换行了。

<!DOCTYPE html>
<html>
    <head>
        <title>My Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="CSS/indexCSS.css">
    </head>
    <body>
        <div class="topPics">
            <ul>
                <li>
                    <a href="">
                        <img src="images/santa.jpg"/>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/eyes.jpg"/>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/ladyBlue.jpg"/>
                    </a>
                </li>
                <li>
                    <a href="">
                        <img src="images/andy.jpg"/>
                    </a>
                </li>
            </ul>
        </div>
        <div class="logo">
            <span style="font-size: 30px; color: #fff; font-family: cursive;"> TEXT</span>
            <span style="color: #999"> |  TEXT</span>
        </div>
    </body>
</html>

的CSS

    root {
        display: block;
    }

    body{
        background: #0f0f0f;
        width: 100%;
        height: 100%;
    }

    ul{
        overflow: hidden;
    }

    li{
        margin: 0px;
        float: left;
        height: 100%;

    }

    .topPics{
        overflow: hidden;
        height: 100%;
        width: 100%;

    }

    .logo{
         margin-top: 10px;
         margin-bottom: 10px;
         margin-left: 40px;
         width: 100%
    }

谁能看到这有什么问题吗？

最佳答案

我假设它是margin和padding元素的标准ul和body。

要删除它们（它们由浏览器自动设置），只需应用：

html, body {
    position: relative; /*A little addition*/
    padding: 0; /*Reset browser padding*/
    margin: 0; /*Reset browser margin*/
    height: 100%; /*sets the html/body height to 100% of the window height*/
}

ul {
    padding: 0; /*Reset ul padding*/
    margin: 0; /*Resets ul margin*/
    list-style: none; /*The bullets will look messed up w/o padding.*/
}

关于html - 内联列表缩进，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19413413/