【发布时间】：2017-01-12 06:05:10
【问题描述】：
你好 stackoverflow 社区。当图像元素（社交媒体按钮）进入我网页上的图像时，我遇到了这个问题。首先，我的元素溢出了它们所在的 div 框。我试图用overflowproperty 来修复它，但这不是我想要的。所以我尝试使用clearfix 将元素保留在 div 中，结果就失控了。所以2小时后我仍然没有解决这个问题。我试图使用margin-right 将社交按钮从图像上移开，但它不起作用。同样稍微超出了这个话题，在我实现了具有相对位置的社交按钮之后，我在页面顶部的行在一端变得更短了。用来拉伸几乎整个页面，现在它被剪切了。所以，是的，这里有两个问题。我真的很感激一些帮助。这是我对以下两个问题的关键代码：
HTML：
<!Doctype html>
<html>
<body>
<link href="style.css" rel="stylesheet">
<div class="top_page">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<ul id="nav_container">
<li><a href="about_proper.html">About</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="news.html">News</a></li>
</div>
<div class="media_buttons">
<ul>
<li><a href="about_proper.html"><img src="social/facebook.png" alt="facebook_social_button" style="width:30px;height:30px;"/></a></li>
<li><a href="news.html"><img src="social/twitter.png" alt="twitter_social_button" style="width:30px;height:30px;"/></a></li>
</ul>
</div>
<hr>
<h1>Travel locally and globally</h1>
<div class="content">
<img src="travel.jpg" alt="Go Travel" style="text-align:centre;width:504px;height:228px;"/>
</div>
CSS：
#nav_container {
margin: 0%;
text-align: center;
padding-top: 5px;
left:5px;
right:5px;
width:auto;
}
#nav_container li {
display: inline;
margin: 4%;
font-family: Arial;
}
#nav_container a {
color:#3e3e3e;
background-color:#ffffff;
text-decoration: none;
}
#nav_container a:hover {
background-color:#ffffff;
color: #3e5869;
}
#nav_container a:visited {
color:#357c49;
background-color: #ffffff;
}
div {
padding-top: 50px;
left:5px;
right:5px;
}
h1 {
text-align:center;
margin: auto;
width:60%;
color: #73AD21;
font-family: Arial;
top:-40px;
height: 6%;
padding: 3%;
}
.content {
margin:auto;
text-align:center;
top: 5px;
padding-bottom:45px;
}
.media_buttons {
position:relative;
top:300px;
left:20%;
border:solid;
padding:5px;
display:block;
text-decoration: none;
list-style-type:none;
}
.media_buttons li {
list-style-type:none;
width:100%;
height:100%;
margin-right:50px;
float:left;
}
【问题讨论】：
-
欢迎来到 SO，请注意：
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须是<head>而不是<body>，我会检查我能为你做些什么 :) -
那么你到底想把社交图标放在哪里？
-
嗨，Mools，我希望他们在图片上 :)
标签： html css responsive-design responsive responsive-images