Question

你能帮助我在<h1>和<ul>之间留出一些空间吗？

＆＃13;

h1
{
    margin:0;
    padding:0;
    float:left;
}
ul {
    list-style-type: none;
    margin-left: 0;
    padding-left:0;
    
}

li {
    display: inline;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="" href="style.css">.
	<meta charset="utf-8">
	<title>Road to succes</title>
</head>
<body>
	<header>
		<h1>Stefan Dobrincu</h1>
		<ul>
  			<li><a href="default.asp">About</a></li>
  			<li><a href="contact.asp">Gallery</a></li>
  			<li><a href="about.asp">Contact</a></li>
 		</ul>
 	</header>
 	<footer>
 		<a href="https://www.facebook.com/dobrincu.stefan">
		<img border="0" alt="Profile" src="Images\Facebook.png" width="100" height="100">
		</a>
		<a href="https://www.instagram.com/stefanhab/?hl=en">
		<img border="0" alt="Profile" src="Images\Instagram.png" width="100" height="100">
		</a>
 		<p> &copy; Dobrincu Stefan 2017</p>
 	</footer>
</body>
</html>

＆＃13;

Answer 1

<h1>已经margin＆amp;显而易见的block财产为什么你压倒一切。删除h1 css。

h1默认为margin-top: 0.67em; margin-bottom: 0.67em;，因此会自动对齐。删除h1 css

后，请参阅代码段输出

ul {
    list-style-type: none;
    margin-left: 0;
    padding-left:0;
    
}

li {
    display: inline;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="" href="style.css">.
	<meta charset="utf-8">
	<title>Road to succes</title>
</head>
<body>
	<header>
		<h1>Stefan Dobrincu</h1>
		<ul>
  			<li><a href="default.asp">About</a></li>
  			<li><a href="contact.asp">Gallery</a></li>
  			<li><a href="about.asp">Contact</a></li>
 		</ul>
 	</header>
 	<footer>
 		<a href="https://www.facebook.com/dobrincu.stefan">
		<img border="0" alt="Profile" src="Images\Facebook.png" width="100" height="100">
		</a>
		<a href="https://www.instagram.com/stefanhab/?hl=en">
		<img border="0" alt="Profile" src="Images\Instagram.png" width="100" height="100">
		</a>
 		<p> &copy; Dobrincu Stefan 2017</p>
 	</footer>
</body>
</html>

如果您想要水平间距，请padding-right使用h1。

h1
{
    margin:0;
    padding:0;
    float:left;
    padding-right:30px;
}
ul {
    list-style-type: none;
    margin-left: 0;
    padding-left:0;
    
}

li {
    display: inline;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="" href="style.css">.
	<meta charset="utf-8">
	<title>Road to succes</title>
</head>
<body>
	<header>
		<h1>Stefan Dobrincu</h1>
		<ul>
  			<li><a href="default.asp">About</a></li>
  			<li><a href="contact.asp">Gallery</a></li>
  			<li><a href="about.asp">Contact</a></li>
 		</ul>
 	</header>
 	<footer>
 		<a href="https://www.facebook.com/dobrincu.stefan">
		<img border="0" alt="Profile" src="Images\Facebook.png" width="100" height="100">
		</a>
		<a href="https://www.instagram.com/stefanhab/?hl=en">
		<img border="0" alt="Profile" src="Images\Instagram.png" width="100" height="100">
		</a>
 		<p> &copy; Dobrincu Stefan 2017</p>
 	</footer>
</body>
</html>

Answer 2

尝试在css文件中为你的h1类添加margin-bottom。

f.e。 margin-bottom：10px;

H1和ul在同一行

2 个答案: