Question

标题说这一切由于某种原因我的保证金0自动不是我的保证金中心：0自动;不会将我的ul放在nav元素中。任何帮助将不胜感激。我已经看过关于相同问题的堆栈上的其他帖子，并且无法解决我的问题。

CSS

/* Sets the body to take up 100% of the width of the browser */
body {
    width: 100%;
    background: #444444;
    margin: 0px;
}

#container{
    width: 100%;
}
header {

    margin-left: -10px;
    margin-top: -10px;
    padding: 0 20px;
    width: 25%;
    height: 12000px;
    background: url("imgs/headerBg.jpg") repeat-y;
    float: left;
}

nav{
    width:60%;
    margin: auto;
}

nav ul{
width: 70%;
list-style-type: none;
text-align: center;
margin: 0 auto;
}

nav ul li{
    height: 45px;
    padding: 0px;
    margin: 0px;
    display: inline-block;
    border-top: 3px double #fff;

}

nav ul li a{
text-decoration: none;
text-align: center;
font-weight: bold;
color: #ffffff;
font-size: 2.5em;
}

#homepage{
height: 120000px;
width: 65%;
float: left;
}

#homepage li{
    list-style-type: none;
    height: 14.20%;

}

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Skull Alcohol &copy;</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="container">


    <header>
        <nav>
            <ul>
                <li><a href="">home</a></li>
                <li><a href="">recipes</a></li>
                <li><a href="">our products</a></li>
                <li><a href="">shop</a></li>
                <li><a href="">contact</a></li>
            </ul>
        </nav>
    </header>

    <section id="homepage">
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
        <li>
            <hgroup></hgroup>
            <figure><img src="" alt=""/></figure>
            <figcaption></figcaption>
        </li>
    </section>

    <footer>
        <div id="privacy"><a href=""></a>privacy</div>
        <div id="tos"><a href="">terms of service</a></div>
    </footer>

</div>
</body>
</html>

Answer 1

看起来您的ul实际上是居中的，但由于ul左侧有默认填充，因此它显示在右侧。

尝试将padding: 0添加到您的nav ul规则中。

保证金0自动无法按预期工作

1 个答案: