試圖從網站中創建的菜單中刪除額外的空間

在我下面提供的代碼中，我看到或者我的CSS或HTML是錯誤的，因爲我使用http://www.w3schools.com/css/css_navbar.asp的示例創建了一個側面菜單。我將這個例子添加到我的網頁中，出於某種原因，左邊顯示了一些額外的空間，並且它不可點擊作爲鏈接（它應該是）。我也在這個項目中使用Aptana Studio 3，由於某種原因它在CSS文件中顯示了100vh的錯誤，但我認爲這不是問題所在。試圖從網站中創建的菜單中刪除額外的空間

html { 
 
    background-image: url('myimage.jpg'); 
 
    background-repeat: no-repeat; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
.divSize { 
 
    height: 100vh; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
} 
 
#navmenu { 
 
    float: left; 
 
} 
 
body { 
 
    margin: 0px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding 0; 
 
    width: 15%; 
 
    background-color: #f1f1f1; 
 
    height: 100%; 
 
    position: fixed; 
 
    overflow: auto; 
 
} 
 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 14px 20px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
} 
 
li a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 
li a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 
li a:hover:not(.active) { 
 
    background-color: #555; 
 
    color: white; 
 
}

<!DOCTYPE html> 
 
<html lang="en-US"> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
 
    <title>Home</title> 
 
</head> 
 

 
<body> 
 
    <div> 
 

 
    <div align="right" class="divSize"> 
 
     <img src="images/myimage.png" alt="My Image" style="width: 145px; height: 86px"> 
 
     <div id="navmenu"> 
 
     <ul> 
 
      <li><a class="active" href="#home">Home</a> 
 
      </li> 
 
      <li><a href="#stuff1">Stuff</a> 
 
      </li> 
 
      <li><a href="#stuff2">Stuff</a> 
 
      </li> 
 
      <li><a href="#stuff3">Stuff</a> 
 
      </li> 
 
      <li><a href="#stuff4">Stuff</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</body> 
 

 
</html>

來源

2016-08-16 Rajat Khare

也只是注意到了開放html標籤中的lange。將其更正爲lang用於打開html標記。 –

'padding 0;'應該是'padding：0;'。錯別字相關的問題是無關緊要的。只需使用瀏覽器的開發人員工具作爲調試器即可。查看框模型，查看應用的CSS規則。然後你應該注意到缺少'padding'規則。仔細看看'padding'規則，你會注意到錯誤的語法。 – Xufox

剛更改了代碼。感謝您的輸入！ –

錯字在padding應用於ul - 固定它，你去那裏！

html { 
 
    background-image: url('myimage.jpg'); 
 
    background-repeat: no-repeat; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
.divSize { 
 
    height: 100vh; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
} 
 
#navmenu { 
 
    float: left; 
 
} 
 
body { 
 
    margin: 0px; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 15%; 
 
    background-color: #f1f1f1; 
 
    height: 100%; 
 
    position: fixed; 
 
    overflow: auto; 
 
} 
 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 14px 20px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
} 
 
li a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 
li a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 
li a:hover:not(.active) { 
 
    background-color: #555; 
 
    color: white; 
 
}

<!DOCTYPE html> 
 
<html lang="en-US"> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="styles.css"> 
 
    <title>Home</title> 
 
</head> 
 

 
<body> 
 
    <div> 
 

 
    <div align="right" class="divSize"> 
 
     <img src="images/myimage.png" alt="My Image" style="width: 145px; height: 86px"> 
 
     <div id="navmenu"> 
 
     <ul> 
 
      <li><a class="active" href="#home">Home</a> 
 
      </li> 
 
      <li><a href="#stuff1">Stuff</a> 
 
      </li> 
 
      <li><a href="#stuff2">Stuff</a> 
 
      </li> 
 
      <li><a href="#stuff3">Stuff</a> 
 
      </li> 
 
      <li><a href="#stuff4">Stuff</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</body> 
 

 
</html>

來源

2016-08-16 02:20:08 kukkuz

試試這個代碼：

html { 
 
    background-image: url('myimage.jpg'); 
 
    background-repeat: no-repeat; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.divSize { 
 
    height: 100vh; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
} 
 

 
#navmenu { 
 
    float: left; 
 
} 
 

 
body { 
 
    margin: 0px; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding 0; 
 
    width: 15%; 
 
    background-color: #f1f1f1; 
 
    height: 100%; 
 
    position: fixed; 
 
    overflow: auto; 
 
} 
 
ul{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
li a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 14px 20px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
} 
 

 
li a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 

 
li a.active { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #555; 
 
    color: white; 
 
}

<body> 
 
    <div> 
 

 
    <div align="right" class="divSize"> 
 
     <img src="images/myimage.png" alt="My Image" style="width: 145px; height: 86px"> 
 
     <div id="navmenu"> 
 
     <ul> 
 
      <li><a class="active" href="#home">Home</a> 
 
      </li> 
 
      <li><a href="#stuff1">Stuff</a> 
 
      </li> 
 
      <li><a href="#stuff2">Stuff</a> 
 
      </li> 
 
      <li><a href="#stuff3">Stuff</a> 
 
      </li> 
 
      <li><a href="#stuff4">Stuff</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</body>

來源

2016-08-16 02:20:15 Smit

好的做法網頁設計師傾向於使用是使用包括「*」或普遍的選擇第一行CSS來擺脫一些默認的邊距和填充。

//At the top of your CSS put 
*{ 
    margin: 0; 
    padding:0; 
}

它會很好地調整空間。爲了將來的參考，我建議使用bootstrap。它會讓你開心。

來源

2016-08-16 02:21:00 Nicholas

感謝您的輸入！它已被證明可以幫助我到目前爲止所做的許多Web項目 –

試圖從網站中創建的菜單中刪除額外的空間

回答

相關問題