垂直导航栏左侧的空白 [英] White space on the left of vertical nav bar
问题描述
我在移除垂直导航栏左侧的空白时遇到困难.
I am having difficulty removing the white space to the left of my vertical nav bar.
我尝试在主栏中将padding-left设置为0.
I have tried setting padding-left to 0 on my main-bar.
这是我第一次构建导航栏，因此，如果您发现我的代码在语义上存在问题，也请让我知道.
It's my first time building a nav bar, so if you see something semantically wrong with my codes, do let me know as well.
谢谢！
这是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链接.
Here is the JSfiddle link.
http://jsfiddle.net/codermax/fe0L3d08/
推荐答案
大多数Web浏览器对于基本边距和填充都有不同的默认设置.因此，解决此问题的最佳方法是设置所有边距和填充
Most Web browsers have different default settings for the base margins and padding. So The best way to solve this is to set all the margin and padding
*{
margin:0;
padding:0;
}
or
html,body {
margin:0;
padding:0;
}
如果您重置CSS更好，那么您可以使用.像这样的东西:
Also better if you reset your css then you can use. something like this:
http://necolas.github.io/normalize.css/
这篇关于垂直导航栏左侧的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
