HTML 列表 5 列答案

【问题标题】：HTML List 5 ColumnsHTML 列表 5 列
【发布时间】：2012-10-17 19:23:57
【问题描述】：

为什么跟随 CSS 代码没有填满 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% 所以不可能。怎么了？

亲切的问候，聚丙烯

【问题讨论】：

它适用于我：jsfiddle.net/vs5s5
你能在这里显示你的错误页面吗？
关于这个已经写了很多，但没有找到真正的解决方案：ejohn.org/blog/sub-pixel-problems-in-css 和 css-tricks.com/percentage-bugs-in-webkit

标签： html css html-lists

【解决方案1】：

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

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

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

示例 HTML

<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/

【讨论】：

为什么不呢？我用一个例子更新了我的答案，它是如何工作的。
好的，非常感谢它现在可以使用了...我忘了删除“float: left;”。

【解决方案2】：

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

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

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

【讨论】：

这是真的，当然，但其他浏览器引擎很好地完成了这些事情。