Question

我的脸书，推特和Instagram按钮重叠。我希望他们边界边界而不是重叠。另外，如何将嵌入式谷歌地图与中心对齐？

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: notarealemail@duckduckgrouse.com</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>

Answer 1

在 .links 中添加display:block，并在a标记之间删除<br>。

Answer 2

社交链接应为display: inline-block

.social-block a 
{
    display: inline-block;
}

地图的父级#gmap_canvas应该有自动边距

<div style="overflow:hidden;height:500px;width:84%; margin: auto;">

为什么父级和地图的宽度为84％？也许最好将#gmap_canvas设置为100％宽度。由于它是一个块元素，只需删除width: 84%。

http://codepen.io/anon/pen/ALJqrE

Answer 3

对于链接，您可以将line-height:28px;添加到.links CSS。

如果您更改

，则Google地图对齐有效

<div style="overflow:hidden;height:500px;width:84%;">
 <div id="gmap_canvas" style="height:500px;width:84%;">

到

<div style="overflow:hidden;height:500px;width:84%;margin:auto;">
<div id="gmap_canvas" style="height:500px;width:100%;">

HTML元素相互重叠（+对齐嵌入式Google地图）

3 个答案: