Question

我是HTML / CSS的新手。在我的导航栏/标题上，我似乎无法将“ .navleft”或“ .navright”移至“ .container”类的顶部（我的目标是将.nav类移至容器，这样我就可以将文本放在它们各自的.nav类中，然后将其居中在导航栏上。我用白色突出显示了我正在谈论的空间。当我使用CSS调整其高度和边距时，只会在页面上显示 down 部分。我也尝试过“ top：0;”。在这两个类中似乎什么都没做。

<!DOCTYPE html>
<html>
<head>
<style>

header {
    width: 100vw;
    height: 120px;
    background: #d0e5e2;
    border-bottom: solid 4px #000000;
    border-top: solid 4px #000000;
    position: fixed;
    top: 0;
    margin: 15px 0 0 0; 
    font-weight: bold;
    font-size: 14pt;
}

#logo {
    width: 100px;
    height: 100px;
    text-align: center;
    margin: auto;
}

.container {
    width: 90vw;
    margin: 0 auto;
}

.navleft {
    float: left;
    text-align: bottom;
    background: #ffffff;
}

.navright {
    float: right;
    text-align: bottom;
    background: #ffffff;
}

.navleft ul {
    margin: 0;
    padding: 0;
    top: 0;
}

.navright ul {
    margin: 0;
    padding: 0;
    top: 0;
}

.navleft li {
    display: inline-block;
    margin-left: 10vw;
    padding-bottom: 60px;
}

.navright li {
    display: inline-block;
    margin-right: 10vw;
    padding-bottom: 60px;
}
</style>
</head>
<body>

<header>
        <div class = "container">
            <div id = "logo"><a href = "index.html"><img src = "assets/bg1.jpg" width = 120 height = 120 alt = "Home" title = "Home"></a></div>
            <div class = "navleft">
                <ul>
                    <li><a href = "#">NEWS</a></li>
                    <li><a href = "#">PORTFOLIO</a></li>
                </ul>
            </div>
            <div class = "navright">
                <ul>
                    <li><a href = "#">ABOUT US</a></li>
                    <li><a href = "#">FAQ</a></li>
                </ul>
            </div>
        </div>
    </header>

</body>
</html>

Answer 1

这会将导航div放在容器的顶部。

<!DOCTYPE html>
<html>
<head>
<style>

header {
    width: 100vw;
    height: 120px;
    background: #d0e5e2;
    border-bottom: solid 4px #000000;
    border-top: solid 4px #000000;
    position: fixed;
    top: 0;
    margin: 15px 0 0 0; 
    font-weight: bold;
    font-size: 14pt;
}

#logo {
    width: 100px;
    height: 100px;
    text-align: center;
    margin: auto;
}

.container {
    width: 90vw;
    margin: 0 auto;
}

.navleft {
    float: left;
    text-align: bottom;
    background: #ffffff;
}

.navright {
    float: right;
    text-align: bottom;
    background: #ffffff;
}

.navleft ul {
    margin: 0;
    padding: 0;
    top: 0;
}

.navright ul {
    margin: 0;
    padding: 0;
    top: 0;
}

.navleft li {
    display: inline-block;
    margin-left: 10vw;
    padding-bottom: 60px;
}

.navright li {
    display: inline-block;
    margin-right: 10vw;
    padding-bottom: 60px;
}
</style>
</head>
<body>

<header>
        <div class = "container">
            <div class = "navleft">
                <ul>
                    <li><a href = "#">NEWS</a></li>
                    <li><a href = "#">PORTFOLIO</a></li>
                </ul>
            </div>
            <div class = "navright">
                <ul>
                    <li><a href = "#">ABOUT US</a></li>
                    <li><a href = "#">FAQ</a></li>
                </ul>
            </div>
            <div id = "logo"><a href = "index.html"><img src = "assets/bg1.jpg" width = 120 height = 120 alt = "Home" title = "Home"></a></div>
        </div>
    </header>

</body>
</html>

使用CSS将HTML（导航）类移到容器类的顶部？

1 个答案: