导航元素位于标题下方

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>