网站左侧令人讨厌的白色间隙

Question

过去两个小时我一直在努力摆脱这个差距，但我仍然没有运气:(任何帮助将不胜感激。我已经正确链接 normalise.css，随时我尝试将 body/header/footer 0 的边距设置为 hr 行不会向左移动，文本也不会向左移动，这也使我的徽标看起来稍微偏离中心，这很烦人。我附上了一张图片当我运行它时，网站对我来说是什么样子。

PICTURE OF SITE

a {
 text-decoration: none;
}

img.center {      /* Centering and styling the logo */
  display: block;
   margin: auto;
   width: 7%;
   padding: 0;
}

ul {               /* Removing the bullet-points and styling the nav bar */
  list-style: none;
}
li {              
   float: left;
}

hr { 
 height: 6px; 
 background-color: #000000; 
 padding: 0;
 margin-left: -8px
 margin: -8px;
 margin-bottom: 2px;
}

head {
 margin: 0;
}

body {
 margin: 0;
}

footer {
 margin: 0;
}

<!DOCTYPE html>
<!-- Declaring the document type -->

<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="CSS/normalise.css"> <!-- creating link element to the normalise.css file -->
  <link rel="stylesheet" type="text/css" href="CSS/main.css"> <!-- creating link element to the main.css file --> 
 </head>
 <body>
  <header>
   <img src="LOGO.png" alt="ANALOG Logo" class="center"> <!-- Adding the logo  -->
   <nav> <!-- indicates that page navigation follows -->
    <ul> <!-- Unorderd list of elements -->
     <li><a href="about.html">About Us</a></li> <!-- Link to About Us page -->
     <li><a href="venues.html">Venues</a></li> <!-- Link to Venues page -->
     <li><a href="index.html">Home Page</a></li> <!-- Link to Home Page -->
     <li><a href="artists.html">Artists</a></li> <!-- Link to Artists page -->
     <li><a href="contactus.html">Contact Us</a></li> <!-- Link to Contact Us page --> 
    <hr/> <!-- horizontal line across page -->
 </body>










</html>

Answer 1

尝试使用 *{margin:0; padding:0;} 这将重置您网站上所有元素的所有额外边距和填充。然后只有当你需要它们的样式时，你才添加一些东西，这将是一个很好的做法！但是你可以做一些像 html{margin:0; padding:0;} 这样的事情，这也应该足够你的页面周围的边框。即使它不能解决您的问题，实施我在这里写的内容也是一个很好的做法。

另外，为了避免在某些浏览器中出现类似问题，最好实现文档类型和 html 标记的每个细节，例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ... </html>

Answer 2

这里有两个问题 - 首先是 li 被浮动，但浮动没有被清除 - 所以 hr 处于移位的位置。我通过向 hr.

添加 clear:both 样式规则来更正此问题

另一个问题是 ul 已经被 browner 应用了填充 - 所以我明确地将 ul 的填充左侧设置为 0。我还在 li 中添加了一个 margin-right 但你可能想使用 flex 来space 他们均匀地出来。

a {
 text-decoration: none;
}

img.center {      /* Centering and styling the logo */
  display: block;
   margin: auto;
   width: 7%;
   padding: 0;
}

ul {               /* Removing the bullet-points and styling the nav bar */
  list-style: none;
  padding-left:0;
}
li {              
   float: left;
    margin-right:15px
}

hr { 
 height: 6px; 
 background-color: #000000; 
 padding: 0;
 margin-left: -8px
 margin: -8px;
 margin-bottom: 2px;
}

head {
 margin: 0;
}

body {
 margin: 0;
}

footer {
 margin: 0;
}

hr {clear:both}

<!DOCTYPE html>
<!-- Declaring the document type -->

<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="CSS/normalise.css"> <!-- creating link element to the normalise.css file -->
  <link rel="stylesheet" type="text/css" href="CSS/main.css"> <!-- creating link element to the main.css file --> 
 </head>
 <body>
  <header>
   <img src="LOGO.png" alt="ANALOG Logo" class="center"> <!-- Adding the logo  -->
   <nav> <!-- indicates that page navigation follows -->
    <ul> <!-- Unorderd list of elements -->
     <li><a href="about.html">About Us</a></li> <!-- Link to About Us page -->
     <li><a href="venues.html">Venues</a></li> <!-- Link to Venues page -->
     <li><a href="index.html">Home Page</a></li> <!-- Link to Home Page -->
     <li><a href="artists.html">Artists</a></li> <!-- Link to Artists page -->
     <li><a href="contactus.html">Contact Us</a></li> <!-- Link to Contact Us page --> 
    <hr/> <!-- horizontal line across page -->
 </body>










</html>

网站左侧令人讨厌的白色间隙

Annoying white gap on left side of site

html

css

styles

margin