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

问题描述 投票:-1回答:2

我一直试图在过去的两个小时内摆脱这个差距,我仍然没有运气:(任何帮助都会非常感激。我已经正确链接了normalise.css,任何时候我尝试制作的边缘身体/页眉/页脚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>
html css styles margin
2个回答
0
投票

这里有两个问题 - 首先是li的浮动,但浮动没有被清除 - 所以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>

0
投票

尝试使用*{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>
© www.soinside.com 2019 - 2024. All rights reserved.