0

为什么遵循 CSS-Code 没有填满 100% 的屏幕？我有 5 列，宽度为 20%，向左浮动。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <style type="text/css" media="screen">
        body {
            padding: 0;
            margin: 0;
        }
        #container {
            width: 100%;
            background-color: red;
            height: 42px;
        }

        ul {
            padding: 0;
            margin: 0;
            width: 100%;
            overflow: hidden;
            list-style-type: none;
            float: left;
            white-space: nowrap;
            display: inline;
            height: 42px;
        }

        li {
            float: left;
            width: 20%;
            padding: 0;
            background-color: #000000;
            display: inline;
        }

        a {
            text-decoration: none;
            color: #333;
            text-align: center;
            display: block;
            height: 42px;
            line-height: 42px;
            white-space: nowrap;
            overflow: hidden;
            font-size: 0.9em;
            width: auto;
        }
        a:hover {
            background-color: #ccc;
            color: #FFF;
        }

    </style>
</head>
<body>
    <div id="container">
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">Portfolio</a>
            </li>
            <li>
                <a href="#">Clients</a>
            </li>
            <li>
                <a href="#">Articles</a>
            </li>
        </ul>
    </div>

</body>

右侧总是有一个红色区域，但 5*20% = 100% 所以不可能。怎么了？

亲切的问候，PP

4

2 回答 2

2

我可以在 Safari 中看到这个问题。它仅在调整浏览器大小时有时会发生。这似乎是 WebKit 浏览器中的一个舍入问题。我发现这个类似的 qwuestion “ 100% width divs not spanning the entire width of the browser in webkit ” 并带有以下评论：

感谢您的建议，不幸的是问题仍然存在。我想我已经将它缩小到 Safari 和 Chrome 将基于百分比的宽度四舍五入到百分比的 1/2（并且没有更多），这会导致剩余空间，除非总宽度是“像素完美”。也许我可以想出一种方法来欺骗浏览器正确计算它，但目前我仍然无法解决这个问题。

也许您可以display: table-cell在<li>-tags 上使用来避免这个问题，因为这应该会强制浏览器始终使用 100% 宽度。

示例 HTML

​&lt;div>
    <ul>
        <li><a href="">Value 1</a></li>
        <li><a href="">Value 2</a></li>
        <li><a href="">Value 3</a></li>
        <li><a href="">Value 4</a></li>
        <li><a href="">Value 5</a></li>
    </ul>
</div>​​​​​​​​​​​​​​​​​​​​​​

示例 CSS

​ul {
    display: table;
    width: 100%;
    min-width: 400px;
    margin: 0;
    padding: 0;
    background: red;
    list-style: none;
}

li {
    display: table-cell;
    width: 20%;
    margin: 0;
    padding: 0;
    text-align: center;
    background: green;
}

li > a {
    display: block;
    height: 42px;
    line-height: 42px;
    background: #ccc;
}

先试后买

http://jsfiddle.net/Fsjns/

于 2012-10-17T08:07:08.487 回答
0

分辨率 1024*(20/100) = 204.8 像素

分辨率 1366*(20/100) = 207.2 像素

我认为屏幕不能显示小于一个像素

于 2012-10-17T08:38:32.093 回答