html - 导航元素位于标题下方

Question

所以我一直在努力解决我的问题。首先，我的导航栏将永远不会进入标题元素。我的图片元素(#Billede div 框)似乎受此影响，因为我只给了它一个高度和宽度，但它一直向左缩放并一直存在。有什么建议吗？

nav,
li,
a {
  text-decoration: none;
  list-style-type: none;
  float: right;
  margin-bottom: 10px;
  padding: 5px;
}

header {
  width: 80%;
  height: 100px;
  margin-rigth: 10%;
  margin-left: 10%;
  color: rgb(255, 46, 248);
}

form {
  margin-top: 100px;
  width: 800px;
  margin-right: 400px;
}

input[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 15px;
}

textarea[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  float: left;
  resize: none;
}

button[type=submit] {
  width: 100%;
  background-color: rgb(255, 45, 248);
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#Billede {
  height: 60px;
  width: 30px;
}

<header>
  <h1>Mike's Portfolio</h1>
  <nav>
    <li><a href="#">Opgaver</a></li>
    <li><a href="index.html">Om Mig</a></li>
  </nav>
</header>

<div id="Info"></div>

<div id="Billede"><img src="../../Images/Billede.jpg"></div>

Answer 1

这是你想要的吗？？.. h1 是一个博客元素，所以它占据了整个宽度，这就是 nav 出现在下一行的原因。希望对你有帮助

你的图片向右移动是因为你的图片被 a 包裹并且 a 有 float: right css

nav, li, a {
    text-decoration: none;
    list-style-type: none;
    float: right; //this
    margin-bottom: 10px;
    padding: 5px;
}

nav, li, a{
			text-decoration: none;
			list-style-type: none;
			float: right; 
			margin-bottom: 10px; 
			padding: 5px;
		}

		header{
			width: 80%;
			height: 100px;
			margin-rigth: 10%;
			margin-left: 10%;
			color: rgb(255, 46, 248);
		}

		form{
			margin-top: 100px;
			width: 800px;
			margin-right: 400px;
		}

		input[type=text], select {
  			width: 100%;
  			padding: 12px 20px;
  			margin: 8px 0;
  			display: inline-block;
  			border: 1px solid #ccc;
  			border-radius: 4px;
  			box-sizing: border-box;
  			margin-bottom: 15px;
  		}

  		textarea[type=text], select{
  			width: 100%;
  			padding: 12px 20px;
  			margin: 8px 0;
  			display: inline-block;
  			border: 1px solid #ccc;
  			border-radius: 4px;
  			box-sizing: border-box;
  			float: left;
  			resize: none;
  		}

  		button[type=submit] {
  			width: 100%;
  			background-color: rgb(255, 45, 248);
  			color: white;
  			padding: 14px 20px;
  			margin: 8px 0;
  			border: none;
  			border-radius: 4px;
  			cursor: pointer; 
  		}

  		#Billede{
  			height: 60px;
  			width: 30px;
  		}

h1{
  display: inline-block;
    margin: 0;
}

<header>
	<h1>Mike's Portfolio</h1>
	<nav>
		<li><a href="#">Opgaver</li>
		<li><a href="index.html">Om Mig</li>
	</nav>
</header>

<div id="Info"></div>

<div id="Billede"><img src="../../Images/Billede.jpg"</div>