0

次の CSS コードが画面の 100% を埋めないのはなぜですか? 幅が 20% の 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 ブラウザーの丸めの問題のようです。私は、このようなコメントで「100% 幅の div が 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 ピクセル

画面は 1 ピクセル未満は表示できないと思います

于 2012-10-17T08:38:32.093 に答える