垂直导航栏左侧的空白位置

我无法移除垂直导航栏左侧的空白空间。垂直导航栏左侧的空白位置

我已经尝试在我的主栏上设置填充左边为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/

来源

2014-08-30 codemax

大多数Web浏览器对基础边距和填充不同的默认设置。因此，要解决这个问题的最好办法是设置所有margin和padding

*{ 
    margin:0; 
    padding:0; 
} 

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

也比较好，如果你重新设置你的CSS，那么你可以使用。像这样：

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

来源

2014-08-30 02:08:08 Bipon

谢谢！有用！ – codemax 2014-08-30 02:10:55

感谢规范化的CSS链接！ – codemax 2014-08-30 02:30:57

你需要使用一个reset.css来解决不同的浏览器的怪癖。我已经更新您的样品，并设置身体保证金，并填充为0

body { 
    margin:0; 
    padding:0; 
}

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

来源

2014-08-30 01:22:36

您的链接已损坏。 – lxcky 2014-08-30 01:31:04

是的，因为如果在帖子中还有代码标签，则只允许发布jsfiddle链接。我希望人们能够复制并粘贴到他们的地址栏中。 – 2014-08-30 01:35:50

我也这么认为，但现在当你提到它，它不是，我会在我的文章中添加一个代码标签并链接小提琴。 – 2014-08-30 01:48:34

垂直导航栏左侧的空白位置

回答

相关问题