您好stackoverflow社区。当图像元素（社交媒体按钮）运行到我的网页上的图像时，我遇到了这个问题。首先，我的元素溢出了它们所在的div框。我试图用overflow属性修复它，但它不是我追求的。所以我尝试使用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;
}
答案 0 :(得分：0)
修改
#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;
width: 596px;
padding-bottom: 45px;
position: relative;
}
.media_buttons {
position: absolute;
padding: 5px;
display: block;
top: 30px;
width: 0px;
text-decoration: none;
z-index: 1;
list-style-type: none;
}
.media_buttons li {
list-style-type: none;
width: auto;
height: auto;
margin-right: 10px;
display: inline-block;
}<div class="top_page">
<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>
<hr>
<h1>Travel locally and globally</h1>
<div class="content">
<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>
<img src="travel.jpg" alt="Go Travel" style="text-align:center;width:504px;height:228px;"/>
</div>