保证金CSS在div之间不起作用

时间：2015-03-03 23:08:14

标签： html css

我有两个div，我试图在<div id="menu">和<div class="Content">之间留出空格。

以下是目前的截图，您可以看到图片正好在导航菜单的底部。

Page Screen Shot

我已经为他们两个添加了利润，但到目前为止我没有做过任何工作。没有多少像素在我的导航和页面内容之间留出任何空间。 我在<div class="Logo">上有一个保证金底部，并且有助于在它下方留出空间，所以我似乎无法弄清楚我不能在导航下方和/或内容之上放置空间。

HTML：

<!DOCTYPE html>
<html>

    <head>
        <title>EGLT Home</title>
        <link rel="stylesheet" type="text/css" href="site.css" />

        <script language="javascript" type="text/javascript" src="responsivemenu.js"></script>
    </head>

    <body>
        <div class="box-effect">
            <div class="Header">
                <div class="Logo">
                    <img src="images/EverClearLogo.png" width="306px" height="125px" alt="Company Logo" />
                </div>
                <div class="Contact-Info">
                    <a href="mailto:evercleargl@gmail.com""><img src="images/icon_Email.png" width="50px" height="50px" alt="Email Ever Clear" /></a>
                    <a href="https://www.facebook.com/evercleargl"><img src="images/icon_Facebook.png" width="50px" height="50px" alt="Ever Clear Facebook Page" /></a>
                    <a href="contact.html"><img src="images/icon_Phone.png" width="50px" height="50px" alt="Go To Contact Us Page" /></a>
                </div>
                <div id="menu" class="nav">
                    <ul>
                        <li><a href='index.html' title=""><span class="icon"><i aria-hidden="true" class="icon-home"></i><span></span>Home</span></a></li>
                        <li><a href='about.html' title=""><span class="icon"><i aria-hidden="true" class="icon-newspaper"></i><span></span>About Us</span></a></li>
                        <li><a href='services.html' title=""><span class="icon"><i aria-hidden="true" class="icon-hammer"></i><span></span>Services</span></a></li>
                        <li><a href='gallery.html' title=""><span class="icon"><i aria-hidden="true" class="icon-image"></i><span></span>Gallery</span></a></li>
                        <li><a href='contact.html' title=""><span class="icon"><i aria-hidden="true" class="icon-phone"></i><span></span>Contact Us</span></a></li>
                    </ul>
                </div>
            </div>
            <div class="Content">
                <div class="Home-Left">
                    <img src="images/EverClearEdited.jpg" width="547px" height="315px" alt="Ever Clear Grading Landscaping Trucking" />
                </div>
                <div class="Home-Right">
                </div>
            </div>
            <div class="Footer">
                <div class="Copyright">
                    &copy; Copyright: Jason Milam - 2015
                </div>
            </div>
        </div>
    </body>

</html>

CSS：

/* SHARED STYLES */
body {
    color: #333;
    font-size: .85em;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    background-image: url("images/RedHexagons.jpg");
}

.Header {
    height: 125px;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
}

.Footer {
    float: left;
    clear: left;
}

.box-effect {
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    width: 90%;
    padding: 25px;
    background-color:#FFF;
    background: rgba(255,255,255,0.85);
    border-radius: 15px;
    overflow: hidden;
}

.Logo {
    width: 306px;
    margin-bottom: 20px;
}

.Contact-Info {
    font-size: 20px;
    display: block;
    position: absolute;
    right: 0;
    top: 0; 
}

.Copyright {
    margin-top: 10px;
}

/* HOME PAGE STYLES */
.Content {
    margin-top: 30px;
}

.Home-Left {
    width: 50%;
    float: left;
}

.Home-Right {
    width: 50%;
}

/* NAVIGATION MENU */
@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?8n7hjk');
    src:url('fonts/icomoon.eot?#iefix8n7hjk') format('embedded-opentype'),
        url('fonts/icomoon.woff?8n7hjk') format('woff'),
        url('fonts/icomoon.ttf?8n7hjk') format('truetype'),
        url('fonts/icomoon.svg?8n7hjk#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'icomoon';
        src: url('fonts/icomoon.svg?8n7hjk#icomoon') format('svg');

    }
}
[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#menu {
    display: block;
    margin-bottom: 20px;
}

.icon-home:before {
    content: "\e900";
}

.icon-newspaper:before {
    content: "\e904";
}

.icon-image:before {
    content: "\e90d";
}

.icon-phone:before {
    content: "\e942";
}

.icon-hammer:before {
    content: "\e996";
}

.icon-menu:before {
    content: "\e9bd";
}

/* Global CSS for all screen sizes */
.nav {
    display: block;
    margin-bottom:30px;
}

.nav ul {
    max-width: 1200px;
    margin: auto;
    padding: 0;
    list-style: none;
    font-size: 1em;
    font-weight: 300;
}

.nav li span {
    display: block;
}

.nav a {
    display: block;
    color: rgba(249, 249, 249, .9);
    text-decoration: none;
    transition: color .5s, background .5s, height .5s;
}

.nav i{
    /* Make the font smoother for Chrome */
    transform: translate3d(0, 0, 0);
}

/* Remove the blue Webkit background when element is tapped */
a, button {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Hover effect for nav menu */
.no-touch .nav ul:hover a {
    color: rgba(0, 0, 0, .5);
}

.no-touch .nav ul:hover a:hover {
    color: rgba(0, 0, 0, 0.99);
}

.nav li:nth-child(6n+1) {
    background: #000000;
}

.nav li:nth-child(6n+2) {
    background: #000000;
}
.nav li:nth-child(6n+3) {
    background: #000000;
}

.nav li:nth-child(6n+4) {
    background: #000000;
}

.nav li:nth-child(6n+5) {
    background: #000000;
}

.no-touch .nav li:nth-child(6n+1) a:hover,
.no-touch .nav li:nth-child(6n+1) a:active,
.no-touch .nav li:nth-child(6n+1) a:focus {
    border-bottom: 4px solid #E36220;
}

.no-touch .nav li:nth-child(6n+2) a:hover,
.no-touch .nav li:nth-child(6n+2) a:active,
.no-touch .nav li:nth-child(6n+2) a:focus {
    border-bottom: 4px solid #E36220;
}

.no-touch .nav li:nth-child(6n+3) a:hover,
.no-touch .nav li:nth-child(6n+3) a:active,
.no-touch .nav li:nth-child(6n+3) a:focus {
    border-bottom: 4px solid #E36220;
}

.no-touch .nav li:nth-child(6n+4) a:hover,
.no-touch .nav li:nth-child(6n+4) a:active,
.no-touch .nav li:nth-child(6n+4) a:focus {
    border-bottom: 4px solid #E36220;
}

.no-touch .nav li:nth-child(6n+5) a:hover,
.no-touch .nav li:nth-child(6n+5) a:active,
.no-touch .nav li:nth-child(6n+5) a:focus {
    border-bottom: 4px solid #E36220;
}

/* Place the icon */
.icon {
    padding-top: 1.4em;
}

.icon + span {
    margin-top: 2.1em;
    transition: margin .5s;
}

/* Animating the height of the element*/
.nav a {
    height: 7em;
}

/* Making the text follow the height animation */
.no-touch .nav a:hover .icon + span {
    margin-top: 3.2em;
    transition: margin .5s;
}

/* Positioning the icons and preparing for the animation*/
.nav i {
    position: relative;
    display: inline-block;
    margin: auto;
    padding:0.4em;
    border-radius: 50%;
    font-size: 1.8em;
    box-shadow: 0 0 0 0.8em transparent;
    background: rgba(255,255,255,0.1);
    transform: translate3d(0, 0, 0);
    transition: box-shadow .6s ease-in-out;
}   

/* Styling the toggle menu link and hiding it */
.nav .navtoogle{
    display: none;  
    width: 100%;
    padding: 0.5em 0.5em 0.8em;
    font-family: 'Lato',Calibri,Arial,sans-serif;
    font-weight: normal;
    text-align: left;
    color: rgb(7, 16, 15);
    font-size: 1.2em;
    background: none;   
    border: none;
    border-bottom: 4px solid rgb(221, 221, 221);
    cursor: pointer;
}

.navtoogle i{
    z-index:-1;
}

.icon-menu {
    position: relative;
    top: 3px;
    line-height: 0;
    font-size: 1.6em;
}

/* RESPONSIVE STYLES */
@media (min-width: 800px) {

    /* Transforms the list into a horizontal navigation */
    .nav li {
        float: left;
        width: 16.66666666666667%;
        text-align: center;
        transition: border .5s;
    }

    .nav a {
        display: block;
        width: auto;
    }
}

/* The "tablet" and "mobile" version */
@media (max-width: 799.9px) {       

    /* Instead of adding a border, we transition the background color */
    .no-touch .nav ul a:hover,
    .no-touch .nav ul a:active,
    .no-touch .nav ul a:focus {
        background: #000000;
    }

    .nav ul li {
        transition: background 0.5s;
    }   

}

/* CSS for a 2x3 columns version */
@media (min-width: 520px) and (max-width: 799px) {

    /* Creating the 2 column layout using floating elements once again */
    .nav li {
        display: block;
        float: left;
        width: 50%;
        height: 90px;
    }

    /* Adding some padding to make the elements look nicer */
    .nav a {
        padding-left: 1em;      
    }

    /* Displaying the icons on the left, and the text on the right side using inline-block */
    .nav li span, 
    .nav li span.icon {
        display: inline-block;
    }

    .nav li span.icon {
        width: 50%;
    }

    .nav li .icon + span {
        font-size: 1em;
    }

    .icon + span {
        position: relative;
        /*top: -0.2em*/
    }

    /* Adapting the animation for smaller screens*/
    .nav li i {
        display: inline-block;
        padding: 8% 9%;
        border: 4px solid transparent;
        border-radius: 50%;
        font-size: 1.5em;
        background: rgba(255,255,255,0.1);
        transition: border .5s;
    }

    /* Transition effect on the border color */
    .no-touch .nav li:hover i,
    .no-touch .nav li:active i,
    .no-touch .nav li:focus i {
        border: 4px solid rgba(255,255,255,0.1);
    }
}

/* Adapting the font size and width for smaller screns*/
@media (min-width: 32.5em) and (max-width: 38.688em) {

    .nav li span.icon {
        width: 50%;
    }

    .nav li .icon + span {
        font-size: 0.9em;
    }
}

@media (max-width: 32.438em) {

    /* Unhiding the styled menu link */
    .nav .navtoogle{
        margin: auto;
        display: block;
    }

    /* Animating the height of the navigation when the button is clicked */
    /* If JavaScript is disabled, the menu stays open */
    .no-js .nav ul {
        max-height: 30em;
        overflow: hidden;
    }

    /* When JavaScript is enabled, we hide the menu */
    .js .nav ul {
        max-height: 0em;
        overflow: hidden;
    }

    /* Displaying the menu when the user has clicked on the button */
    .js .nav .active + ul {     
        max-height: 30em;
        overflow: hidden;
        transition: max-height .4s;
    }

    /* Adapting the layout of the menu for smaller screens */
    .nav li span {
        display: inline-block;
        height: 100%;
    }

    .nav a {
        padding: 0.5em;     
    }

    .icon + span {
        margin-left: auto;
        font-size: 0.8em;
    }

    .nav li {
        border-left: 8px solid #E36220;
    }

    /* make the nav bigger on touch screens */
    .touch .nav a {
        padding: 0.8em;
    }
}

2 个答案:

答案 0 :(得分：1)

保证金底部适用于.menu的原因是双重的。首先，.Header上的高度小于它包含的内容。第二，你浮动所有的li元素，因此.menu真的没有高度。如果从.Header中删除高度，并从li元素中删除float：left，而在它们上使用display：inline-block，则边距有效。

然后你的li元素需要稍微固定一点，因此它们之间没有空间。

答案 1 :(得分：0)

您的.nav li已浮动，在您的菜单后添加clear:both div，它应解决问题

相关问题
最新问题