Question

我一直在尝试过去两个小时摆脱这个差距，我仍然没有运气:(任何帮助都将非常感激。我已经正确链接normalise.css，我尝试制作身体边缘/页眉/页脚0小时线根本不会向左移动，文本也不会，它也使我的徽标略微偏离中心也很烦人。我已经包含了网站外观的图片我跑的时候也喜欢我。

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;}这样的事情，它也应该足够你的页面边框。即使它没有解决你的问题，实施我在这里写的内容也是一种很好的做法。

另外，为了避免在某些浏览器中出现类似问题，最好还是实现doctype和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中添加一个明确的：两种样式规则来纠正这个问题。

另一个问题是ul有一个由browner应用的填充 - 所以我明确地将ul填充设置为0.我还为li添加了一个margin-right但你可能想使用flex来分隔它们均匀地。

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>

在网站左侧恼人的白色差距

2 个答案: