垂直導航欄左側的空白位置

我無法移除垂直導航欄左側的空白空間。垂直導航欄左側的空白位置

我已經嘗試在我的主欄上設置填充左邊爲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

垂直導航欄左側的空白位置

回答

相關問題