Question

仅尝试使所有内容居中且清洁。除了顶部的导航栏之外，其他所有内容似乎都保持在右侧？

我不知道为什么吗？

谢谢

html ..............

    <div id="nav">

        <ul>
            <li><a href="#landing">Home</a></li>
            <li><a href="#music">Music</a></li>
            <li><a href="#about">About</a></li>
                <li>Musician</li>
            <li><a href="#instagram">Instagram</a></li>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>

    </div>

                    <!-- BELOW THE NAV  -->

<div id="landing">

    <br><br><br> <p>more content</p>


</div>

............

CSS

.............

body {font-family：'Source Code Pro'，等宽；颜色：白色；

    background-color: black;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;


}

div＃容器{

保证金：0自动；

}

div＃nav {

    position: fixed;
    vertical-align: top;

    display: inline-block;

}

li {

    display: inline;

}

div＃landing {

background-image: url('rose1.png');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
height: 100%;
margin: 0 auto;

}

不确定导航仪为何向右浮动？

Answer 1

尝试一下：

div#nav {
    position: fixed;
    vertical-align: top;
    display: block;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
}

Answer 2

我只需进行少量 CSS 更改即可更新您的代码。希望对您有帮助。谢谢

删除display: inline-block;，然后在width: 100%;中添加div#nav。

div#nav {
    position: fixed;
    vertical-align: top;
    width: 100%;
}

还从padding-left中删除默认的ul。

ul {
    padding-left: 0;
}

body { 
    font-family: 'Source Code Pro', monospace; color: white;
    background-color: black;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
}

div#container {
    margin: 0 auto;
}

div#nav {
    position: fixed;
    vertical-align: top;
    width: 100%;
}

ul {
    padding-left: 0;
}

li {
    display: inline;
}

div#landing {
    background-image: url('rose1.png');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    height: 100%;
    margin: 0 auto;
}

<div id="nav">

        <ul>
            <li><a href="#landing">Home</a></li>
            <li><a href="#music">Music</a></li>
            <li><a href="#about">About</a></li>
                <li>Musician</li>
            <li><a href="#instagram">Instagram</a></li>
            <li><a href="#twitter">Twitter</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>

    </div>

                    <!-- BELOW THE NAV  -->

<div id="landing">

    <br><br><br> <p>more content</p>


</div>

Answer 3

从div＃nav CSS块中删除position属性：

div#nav {
    vertical-align: top;
    display: inline-block;
}

为什么我的导航不像其他所有内容一样居中

3 个答案: