Question

我正在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%
    }

有人能看到这个错误吗？

Answer 1

您的屏幕可能是1280像素，但是您的浏览器的边框和滚动条会占用一些空间，因此您无需绘制1280像素。只需尝试在topPics上设置宽度：1280px即可看到效果。

Answer 2

我假设它是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.*/
}

Answer 3

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

.topPics ul { 
   font-size: 0;  
   padding: 0; /* reset padding */
   margin: 0; /* reset margin */
}

内联列表缩进

3 个答案: