html - 垂直导航栏左侧的空白

原文 标签 html css html5

我在删除垂直导航条左侧的空白区域时遇到困难。
我已经试过在主栏上将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/

最佳答案

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

*{
    margin:0;
    padding:0;
}

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

如果你重新设置你的css,那么你就可以使用了。像这样的:
http://necolas.github.io/normalize.css/

关于html - 垂直导航栏左侧的空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25578126/

相关文章:

html - Bootstrap 4真棒字体输入图标

html5 - 是否在WebSite项目中使用grunt和bower进行HTML5开发,还是在Visual Studio 2015中创建HTML5 Web应用程序?

html5 - 复选框内容IE 11/Edge

javascript - HTML5-可以在没有浏览器的情况下运行吗?

jquery - div在每次回发和页面刷新后出现

javascript - 货币转换器无法使用Javascript和HTML

javascript - 如何设置元素的宽度等于窗口宽度的一半

javascript - “gcloud app deploy” 静态网站跳过太多文件

html - 正确的方法是inline-block还是float?

javascript - 如何通过javascript更改背景重复和背景大小