Lista HTML 5 kolumn

Question

Dlaczego poniższy kod CSS nie zajmuje 100% ekranu? Mam 5 kolumn o szerokości 20% procent pływających po lewej stronie.

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

Po prawej stronie zawsze znajduje się czerwony obszar, ale 5*20% = 100%, więc tak nie może być. Co jest nie tak?

Z poważaniem, PP

html css html-lists

0

Patrick 17 październik 2012, 11:40

Answer 1

Widzę ten problem w Safari. Występuje tylko czasami podczas zmiany rozmiaru przeglądarki. Wydaje się, że jest to problem z zaokrąglaniem w przeglądarkach WebKit. Znalazłem podobne qwuestion "Divs o 100% szerokości nie obejmujące całej szerokości przeglądarki w webkicie" z tym komentarzem:

Dzięki za sugestie, niestety problem nadal występuje. Myślę, że zawęziłem to do szerokości zaokrąglonych w Safari i Chrome opartych na % do 1/2 procenta (i nie dalej), co skutkuje pozostawieniem miejsca, chyba że całkowita szerokość jest „pikselowa idealna”. Może uda mi się wymyślić sposób, aby nakłonić przeglądarkę do prawidłowego obliczenia, ale rozwiązanie wciąż mi się umyka.

Być może możesz użyć display: table-cell na tagach <li>, aby uniknąć tego problemu, ponieważ powinno to zmusić przeglądarkę do używania 100% szerokości.

Przykład 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>

Przykład 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;
}

Wypróbuj przed zakupem

http://jsfiddle.net/Fsjns/

2

Community 23 maj 2017, 14:43

Answer 2

Rozdzielczość 1024*(20/100) = 204,8 px

Rozdzielczość 1366*(20/100) = 207,2 px

Myślę, że ekran nie może wyświetlać mniej niż piksel

0

Bunjerd Sparrow 17 październik 2012, 12:38

Lista HTML 5 kolumn

2 odpowiedzi

Podobne pytania

Nowe pytania

html