我似乎无法找到一种方法使我的按钮图标与标题的最右侧对齐，同时将“关于”、“图库”和“恢复”保持在左侧。
另外，有谁知道我怎样才能使文本均匀地适合页面，我在右侧有一个奇怪的间隙，并希望它均匀地适合页面。看来我需要 CSS 方面的帮助。
HTML
body {
background-image: url("images/robot.jpg");
background-position: bottom-left;
margin-right: 200px;
text-align: justify;
width: 800px;
height: 400px;
text-decoration: none;
color: white;
font-family: 'Marvel', sans-serif;
}
ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: right;
padding: 10px 13px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.circular--portrait {
margin-top: 70px;
margin-left: 30px;
width: 200px;
height: 200px;
float: left;
overflow: hidden;
border-radius: 50%;
}
.circular--portrait img {
width: 100%;
}
.circular--portrait {
width: 25%;
float: left;
}
.column-one p {
width: 65%;
float: right;
margin-top: 150px;
margin-left: 10px;
}
.column-two {
float: left;
width: 100%;
}
img {
transition: transform .5s;
}
img:hover {
transform: scale(1.75);
}
<body>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="resume.html">Resume</a></li>
<li>
<a href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on
Deviant Art" target="_blank">
<img src="images/icons/deviantart.png" width="30" height="30"></a>
</li>
<li>
<a href="eddie.ark.munoz@gmail.com" title="Contact" target="_blank">
<img src="images/icons/email.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.linkedin.com/in/eddie-munoz-351a9428/"
title="Follow on Linkedin" target="_blank">
<img src="images/icons/linkedin.png" width="30" height="30"></a>
</li>
<li>
<a href="https://www.instagram.com/eddiearkmunoz/" title="Follow on
Instagram" target="_blank">
<img src="images/icons/instagram.png" width="30" height="30">
</a>
</li>
</ul>
<div class="circular--portrait">
<img src="images/profile.jpg">
</div>
<div class="column-one">
<p>Eddie Munoz has been creating art from the age of 13. While he was
completing his Bachelors of Applied Science in Human Relations he was
freelancing on the side. Eddie has created numerous character artists.</p>
</div>
<div class="column-two">
<h1>What others are saying</h1>
<p>"Eddie is the best young talent I have had the pleasure to work with.
He has a great eye for detail and really finds the fun in whatever
project he is given no matter the size. Eddie strives to learn every
nuance of 3D gaming tech as well as distributing
that knowledge once learned. Eddie is an amazing talent that is bound
for superstar status." - Billy Ashlswede, Art Lead at Riot Games</p>
<p>"Eddie was a highly valued Character Artist with proficiency in many
different modeling programs. He was a very dedicated artist who
frequently helped others and went out of his way to produce additional
assets for our game. Eddie has not only a very
technical, but also a very artistic mindset. All of these qualities
make Eddie a great asset to any team." -Kyle Sarvas, Game Artist/Game
Designer</p>
</div>
</body>
最佳答案
您好，您可以使用 nth-last-child 选择器来控制您的子元素，因此如果您的图像列表已修复，您可以使用
li:nth-last-child(-n+4) { float:right; }
这会将最后 4 个图像列表项向右移动
检查下面的 fiddle 演示
关于html - 如何使按钮图标右对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46391787/