Question

我正在尝试创建一个带有4个不同选项的侧栏，当所选选项处于活动状态时（意味着您在该特定页面上），我希望li后面的整个区域，但在DIV中，背景色比已经存在的颜色稍深，但不知道如何实现这一目标。我已经尝试使li本身100％宽度的div但它根本不影响它。
这是问题：
Here is the issue 如您所见，li未达到侧边栏div的开始和结束宽度。

代码 -

HTML：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Lakeside Books</title>
    <link rel="stylesheet" type="text/css" href="masterstyle.css">
    <meta name="viewsize" content="width-device-width,initial-scale=1.0">

    <!--[if IE]>
    <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>
<div id="wrapper">
    <div id="sidebar">
        <nav id="nav">
            <div id="searchbar">
                <form action="http://www.example.com/search.php">
                    <input type="text" name="search" placeholder="Enter Book Title"/>
                </form>
            </div>
            <ul>
                <li>
                    <a id="firstlink">
                        Home
                    </a>
                </li>
                <li>
                    <a id="secondlink">
                        Categories
                    </a>
                </li>
                <li>
                    <a id="thirdlink">
                        Bestsellers
                    </a>
                </li>
                <li>
                    <a id="fourthlink">
                        Contact
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>
</body>
</html>

CSS：

body{

    background-color: #f1f6f6;
}

#sidebar{
    background-color: #212528;
    position: fixed;
    width: 20%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

#nav{
    margin: 2em 1em;
    color: #888888;
    display: block;
    max-width: 100%;
}

#nav ul {
    padding-left: 0;
}

#nav li{
    list-style-type: none;
    padding: 0;
    text-align: center;
    max-width: 100%;
}

#nav li a {
    display: block;
    padding: 0.5em 0;
}

#searchbar{
    padding-bottom: 0.5em;
    text-align: right;
}

#searchbar input{
    max-width: 95%;
}

Answer 1

您的问题出在您的#nav中。您需要删除x边距：

#nav{
    margin: 2em 0;
}

然后你可以这样做：

#nav li:hover
{
    background:#333;
}

但你也想解决这个问题：

#searchbar{
    text-align: center;
}

http://jsfiddle.net/5amL4tx5/

Answer 2

您的问题是#nav规则。如果删除边距，它将填充整个包含div。

#nav{
  margin: 2em 1em;
  color: #888888;
  display: block;
  max-width: 100%;
}

至于更改背景以使活动元素更暗。我建议创建一个.active类，并根据url将其动态分配到活动页面。

示例活动类：

.active {
  background: c2c2c2;
}

Answer 3

我认为问题出在这里（特别是左/右边距的1em）：

#nav{
    margin: 2em 1em;
}

这将限制#nav内的任何内容。

如何在DIV背景颜色内的列表项目后面给出整个区域

3 个答案: