html - 如何在div上消除右边距？

我的联系页面上有一个div，其ID为contactdetails。根据Chrome的开发者工具，它的右边距留有空白，占页面的其余部分，并且不允许我将Google地图放在联系信息对面的位置。

的HTML

<div class = "content"> <!--begin Content--><!-- InstanceBeginEditable name="editableContent" -->
    <div id = "contactdetails">
        <ul>
        <li><img src = "Images/icons/png/houseicon.png" alt = "Address icon"><p>23 Kingfisher Court, Werribee 3030, Victoria</p></li>
        <li><img src = "Images/icons/png/emailicon.png" alt = "Email icon"><p>[email protected]</p></li>
            <li><img src = "Images/icons/png/phoneicon.png" alt = "Phone icon"><p>0397488945</p></li>
        </ul>
    </div>
    <div id = "contactdetails-right">
        <div id="apimap">
            <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><div style='overflow:hidden;height:180px;width:200px;'>
                <div id='gmap_canvas' style='height:180px;width:200px;'></div><div><small><a href="http://embedgooglemaps.com">                                 embed google maps                           </a></small></div><div><small>
                <a href="https://termsandcondiitionssample.com">terms and conditions sample</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
                </div><script type='text/javascript'>function init_map()
                {var myOptions = {zoom:16,center:new google.maps.LatLng(-37.8777845,144.66931069999998),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.8777845,144.66931069999998)})
                ;infowindow = new google.maps.InfoWindow({content:'<strong>googlemap</strong><br>23 Kingfisher court, werribee<br>'});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>
</div>

的CSS

#contactdetails{
width: 50%;
height: 600px;
box-shadow: 10px 10px 5px #888888;
}

#contactdetails ul{
    margin: 0;
}

#contactdetails ul li{
    list-style-type: none;
    padding: 35px 0;
    text-align: left;
}

#contactdetails ul li img {
    display: inline-block;
    padding-right: 30px;
}

#contactdetails ul li p {
    display: inline;
        font-size: 1em;
}

#contactdetails-right{
    float: right;
    width: 200px;
    border-left: 5px solid #555;
}

#apimap{
    margin-bottom: 50px;
}

最佳答案

您只需要在左边添加浮点数即可

#contactdetails {
    width: 50%;
    height: 600px;
    box-shadow: 10px 10px 5px #888888;
    float: left;
}