Question

我遇到的问题是我的菜单悬停背景颜色是从右边开始，而不是在UL的开头。这是一些截图。对不起要问这个的坏风格。第一个问题。

<!DOCTYPE html>
<html lang="nl">
<head>
    <title>Bargain</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head> 
<body>
    <div id="banner">
        <h3>Bargain</h3>
        <?php
            date_default_timezone_set('Europe/Amsterdam');
            echo '<p>';
            $dag = date('j');
            $maand = date('F');
            $jaar = date('Y');
            $uur = date('G');
            $minuten = date('i');
            if ($uur >= 0 && $uur <= 24) {
            echo "Het is vandaag $dag $maand $jaar <br>De tijd is $uur:$minuten";
            };
            echo '</p>';
        ?>
    </div>
    <div id="menu">
        <ul>
            <li><b>Home</b></li>
            <li><b>Over ons</b></li>
            <li><b>FAQ</b></li>
            <li><b>Contact</b></li>
            <li><b>Help</b></li>
        </ul>
    </div>
    <div id="content">

    </div>
</body>
</html>




body{
    background-color: white;
}

#banner p {
    text-align: left;
}

#banner {
    background-color:#E6E6E6;
    width: 75%;
    margin: 0 auto;
    text-align: center;
}

#menu {
    background-color: #E6E6E6;
    width: 75%;
    margin: 0 auto;
}

#menu ul li:hover {
    background-color: #D4D4D4;
}

#menu ul {
    width: 100%;
    display: table;
    table-layout: fixed;
}

#menu ul li {
    display: table-cell;
    width: auto;
    text-align: center;
}

#content {
    background-color: #E6E6E6;
    width: 75%;
    margin: 0 auto;
    text-align: left;
    height: 800px;
}

Answer 1

#menu ul { padding: 0; }

删除浏览器提供的默认padding

演示 - http://jsfiddle.net/382v8bcm/

在ul中的li的背景颜色悬停不是正确的

1 个答案: