Question

我无法移除垂直导航栏左侧的空白区域。

我已经尝试在我的主栏上将padding-left设置为0。

这是我第一次构建导航栏，所以如果你看到我的代码语义错误，也请告诉我。

谢谢！

这是HTML代码。

<title>Mockup of Zopim</title>
<body>
    <main>
        <nav class = "side-bar">
            <ul class ="main-bar">
                <li class="user-nav"><a class ="big-box" href="#">User</a></li>
                <li class="main-nav"><a href="#">Home</a></li>
                <li class="main-nav"><a href="#">Visitor List</a></li>
                <li class="main-nav"><a href="#">Visualization</a></li>
                <li class="main-nav"><a href="#">History</a></li>
                <li class="divider-nav"><a href="#">Manage</a></li>
                <li class="manage-nav"><a href="#">Agents</a></li>
                <li class="manage-nav"><a href="#">Departments</a></li>
                <li class="manage-nav"><a href="#">Shortcuts</a></li>
                <li class="manage-nav"><a href="#">Banned Visitors</a></li>
                <li class="manage-nav"><a href="#">Triggers</a></li>
                <li class="divider-nav"><a href="#">Settings</a></li>
                <li class="settings-nav"><a href="#">Widgets</a></li>
                <li class="settings-nav"><a href="#">Personal</a></li>
                <li class="settings-nav"><a href="#">Accounts</a></li>
            </ul>
       </nav>
       <article>
        <header>
            <h1>Hello!</h1>
        </header>
       </article>
    </main>
</body>

这是CSS代码。

@charset "utf-8";
/* CSS Document */
body {
    background-color: black;
}
main {
    width: 100%;
}
.side-bar {
    width: 15%;
    height: 100%;
    background-color: #585858;
    position: relative;
    float: left;
}
nav li {
    list-style: none;
}
.main-bar {
    padding-left: 0px;
}
.main-bar li a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 2.5em;
    text-decoration: none;
    color: white;
    text-align: center;
}
article {
    width: 60%;
    height: 30%;
    float: right;
    position: relative; 
}
a.big-box {
    display: block;
    line-height: 7em;
}
header h1 {
    color: white;
}

这是JSfiddle链接。

http://jsfiddle.net/codermax/fe0L3d08/

Answer 1

大多数Web浏览器都具有不同的基本边距和填充的默认设置。所以解决这个问题的最好方法是设置所有边距和填充

*{
    margin:0;
    padding:0;
}

or 
html,body {
    margin:0;
    padding:0;
}

如果你重置你的CSS也更好，那么你可以使用。像这样的东西：

http://necolas.github.io/normalize.css/

Answer 2

您需要使用reset.css来解决不同的浏览器怪癖。我已经更新了你的样本并设置了体边距，填充为0。

body {
    margin:0;
    padding:0;
}

http://jsfiddle.net/fe0L3d08/1/

垂直导航栏左侧的空白区域

2 个答案: