我试图让 3 个图标与我网站的标题水平对齐。我似乎无法让它们与我的横幅保持在相同的边距内。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
CrossFit Villains
</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<header>
<span class="title">
<a href="crossfitvillains.com">CrossFit Villains</a>
</span>
<div id="social">
<img src="fb.png" />
<img src="bird.png" />
<img src="tv.png" />
</div>
<br />
<span>1702 McAra Street, Regina, SK</span>
<br />
<br />
</header>
<div id="banner">
<img src ="banner.jpg" />
</div>
图标的 CSS:
#social img {
float: right;
width: 70px;
height: 70px;
}
最佳答案
好的，
首先一定要 float a元素而不是 img .
标题也应该 float ，以便正确对齐。
也给其他人上课span标题中的元素，以便您可以对其应用样式。使用 <br />在 HTML 中的 元素 之间换行是错误的做法。
span.title {
float:left;
}
#social {
float:right;
}
#social a {
float:left;
margin-right:2px; /* just for the spacing of the elements in example */
}
span.address { /* Added this class to the span in the HTML for styling */
float:left;
}
div#banner {
clear:both; /* to replace the <br /> tag */
}
请参阅已编辑的fiddle .
注意:图片没有正确链接，所以我给“图标”一个红色背景，你的 body 是黑色的，以便于阅读。
干杯，杰伦
关于css - 错误位置的标题图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17014022/