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

【问题标题】：White space on the left of vertical nav bar垂直导航栏左侧的空白区域
【发布时间】：2014-08-30 10:08:08
【问题描述】：

我很难删除垂直导航栏左侧的空白区域。

我尝试在主栏上将 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/

【问题讨论】：

标签： css html

【解决方案1】：

大多数 Web 浏览器的基本边距和内边距都有不同的默认设置。所以解决这个问题最好的办法就是设置所有的margin和padding

*{
    margin:0;
    padding:0;
}

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

如果你重置你的css然后你可以使用更好。像这样：

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

【讨论】：

【解决方案2】：

您需要使用 reset.css 来解决不同的浏览器问题。我已经更新了您的示例并将正文边距和填充设置为 0。

body {
    margin:0;
    padding:0;
}

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

【讨论】：

是的，因为只有在帖子中有代码标签的情况下才允许发布 jsfiddle 链接。我希望人们能够将其复制并粘贴到他们的地址栏中。
我也是这么认为的，但现在你提到它，它不是，我将在我的帖子中添加一个代码标签并链接小提琴。