html - 将图像对齐到容器中文本的右侧

Question

我正在尝试对齐我网站上找到的两个图标(facebook 和 google+ 图标)here .这些小圆形图标位于顶部导航栏的正下方。导航栏是类“container_header”的一部分，在文件“stylesheet.css”中定义。

网页“index.php”包含此代码，其中图标应包含在顶部容器中:

<div class ="container_header">
<div class="header_img"><a href="index.php" class="head"><img border="0" src="images/introspect-pictures_logo_header.png" alt="Home" width="185" height="28"></a></div>
<div class="header">
<a href="index.php" class="body">HOME</a>..........<a href="about.php" class="body">ABOUT</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<div id="social">
<a href="https://www.facebook.com" target="_blank"><img border="0" src="images/ic_fb.png" alt="Facebook"></a>
<a href="https://www.google.com" target="_blank"><img border="0" src="images/ic_gp.png" alt="Google+"></a>
</div>
</div>
</div>

在“stylesheet.css”中，图标(在“social”类中)定义了它们的属性(带有“#”):

#social {
float: right;
width: 60px;
text-align: right;
}

#social a {
float: right;
margin: 20px 0 0 5px;
}

#social a img {
width: 24px;
height: 24px;
border: 0;
}

“container_header”类属性在同一文件中定义为:

.container_header{
width:800px;
margin:0 auto 0 auto;
padding:10px;
border:0px solid #000000;
border-radius: 5px;
color: #666666;
}

任何人都可以帮我将它们对齐到导航栏旁边(“关于”旁边)，以便它们也包含在容器 width (800px) 中。

非常感谢，

皮特

Answer 1

首先，去除.header 的width。这就是为什么您的社交图标不在您的菜单项旁边的原因。然后从 #social a 中删除 margin-top。

编辑:对 .header 使用 width:100%; 也可以。

希望对您有所帮助。