垂直导航栏左侧的空白

最大码

我在移除垂直导航栏左侧的空白时遇到困难。

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

比蓬·比斯瓦斯(Bipon Biswas)

大多数Web浏览器的基本边距和填充都有不同的默认设置。因此,解决此问题的最佳方法是设置所有边距和填充

*{
    margin:0;
    padding:0;
}

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

如果您重置CSS,也可以使用,效果更好。像这样的东西:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章