-2
我的脸谱，推特和Instagram按钮重叠。我希望他们坐在边界上，不要重叠。另外，如何将嵌入式Google地图与中心对齐？HTML元素互相重叠（+对齐嵌入的Google地图）
body {
margin: 0px;
padding: 0px;
}
.banner {
width: 100%;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
margin-top: -5px;
}
body {
margin: 0px;
padding: 0px;
}
.banner {
width: 100%;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #444;
margin-top: -5px;
}
.navli {
float: left;
width: 25%;
margin-top: 0px;
}
.navli a {
display: block;
color: white;
text-align: center;
padding: 14px 0px;
text-decoration: none;
}
.navli a:hover:not(.active) {
background-color: #333;
}
.activeNav {
background-color: #000;
}
.navli:last-child {
border-right: none;
}
.email-block {
float: left;
margin-left: 5%;
}
.social-block {
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.textcenter {
text-align: center;
}
a {
text-decoration: none;
}
.links {
padding: 5px;
color: white;
margin-left: 3%;
}<img src="https://i.sli.mg/km2FIO.jpg" class="banner" />
<ul class="navbar">
<li class="navli"><a class="nava" href="mainPage.html">Home</a>
</li>
<li class="navli"><a class="activeNav nava" href="contact.html">Contact</a>
</li>
<li class="navli"><a class="nava" href="coffee.html">Flowchart</a>
</li>
<li class="navli"><a class="nava" href="menu.html">Menu</a>
</li>
</ul>
<h1 style="text-align:center;"><u>Contact</u></h1>
<div class="clearfix">
<div class="email-block">
<p>email: [email protected]</p>
</div>
<div class="social-block">
<a href='#' class='links' style="background-color:#3b5998;">Facebook</a>
<br />
<a href='#' class='links' style="background-color:#4099FF;">Twitter</a>
<br />
<a href='#' class='links' style="background-color:#125688;">Instagram</a>
</div>
</div>
<div class="textcenter">
<p>125 Sydney Road, Brunswick, Melbourne, Australia, Oceania, Earth, Solar System, Milky Way, Local Group, Virgo Supercluster, Laniakea Supercluster, Universe</p>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div style="overflow:hidden;height:500px;width:84%;">
<div id="gmap_canvas" style="height:500px;width:84%;">
<style>
#gmap_canvas img {
max-width: none!important;
background: none!important
}
</style><a class="google-map-code" href="http://www.themecircle.net/wordpress-ecommerce/" id="get-map-data">Duck Duck Grouse</a>
</div>
</div>
<script type="text/javascript">
function init_map() {
var myOptions = {
zoom: 16,
center: new google.maps.LatLng(-37.774684, 144.96065299999998),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-37.774684, 144.96065299999998)
});
infowindow = new google.maps.InfoWindow({
content: "<b>Duck Duck Grouse</b><br/>125 Sydney Road<br/> Melbourne"
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</div>
你的救星，伙计！ – CodingDucky