0

我正在一个 1280 像素宽的屏幕上开发，虽然我显示的图片加起来只有 1264 像素，但最后一张没有显示内联，而是放在新行中。

<!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%
    }

谁能看出这有什么问题？

4

3 回答 3

0

我假设它是和元素的标准margin和。paddingulbody

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

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.*/
}
于 2013-10-16T20:45:23.293 回答
0

尝试使用这个简单的技巧来删除 LI 之间的空间

.topPics ul { 
   font-size: 0;  
   padding: 0; /* reset padding */
   margin: 0; /* reset margin */
}
于 2013-10-16T20:46:23.787 回答
0

您的屏幕可能是 1280 像素，但其中一些空间被浏览器的边框和滚动条占用，因此您没有 1280 像素可供绘制。只需尝试在 topPics 上设置 width:1280px 即可查看效果。

于 2013-10-16T20:42:05.197 回答