我开始大量编写代码，但在使用这个网站时遇到了一些困难。首先，我制作了带有 nabber 的标题，但我无法将其右对齐，如果我尝试使用 float:right 它会切换链接。在所有这些之下，我想要一张大图，但如果我将页面变大，自动高度和宽度将不起作用。
<!DOCTYPE html>
<style>
header{ background-color: white;
margin-left: 20px;
margin-top: 30px;
}
img.logo{ width: 200px;
height: 30px;
}
li{ display: inline;
}
ul{ position: fixed;
top: 20px;
}
a{ font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
img.picvp{margin-top: 20px;
width: auto;
height: auto;
}
</style>
<header>
<img class="logo" src="#">
<ul>
<li style="float:right;"><a href="Site%20DIA%20main.html">Projecten</a></li>
<li style="float:right;"><a href="#">over</a></li>
<li style="float:right;"><a href='#'>Contact</a></li>
</ul>
</header>
<sec>
<img class="picvp" src="https://lh4.googleusercontent.com/G3M2vxtCatAm1yxWxUA0VVLZjtePu32ziMPd6TLL3wQhk53s4mokl5v_7Rx0crGBp_2Q6iZJnRU-lzQ=w1262-h905">
</sec>
谢谢!
最佳答案
使用 display:flex 会有所帮助。
.header{
background-color: white;
align-items: center;
display: flex;
margin-left: 20px;
margin-top: 30px;
}
.logo{
background-color: #0f0;
width: 200px;
height: 30px;
}
.nav {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
margin-left: auto;
}
.nav li{ display: inline-block; }
.nav a {
border-left: solid 1px;
display: block;
padding: 1em;
}
img.picvp{
margin-top: 20px;
width: auto;
height: auto;
}<header class="header">
<img class="logo" src="#">
<ul class="nav">
<li><a href="Site%20DIA%20main.html">Projecten</a></li>
<li><a href="#">over</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</header>
<sec>
<img class="picvp" src="https://lh4.googleusercontent.com/G3M2vxtCatAm1yxWxUA0VVLZjtePu32ziMPd6TLL3wQhk53s4mokl5v_7Rx0crGBp_2Q6iZJnRU-lzQ=w1262-h905">
</sec>关于HTML 将导航栏右对齐，图像适合页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45514342/