HTML 导航栏定位有问题

Question

我是网络开发的新手，在制作导航栏时，定位不正确。 This 是正在发生的事情的图片。包含 links/other 页面的导航栏的右侧正在下降，但是当我将右侧徽标变小时，它们会恢复原状。我不确定发生了什么。我的代码如下：

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Speech and Debate</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<!-- inline css styling to reset margins/padding -->
<body style="margin: 0; padding: 0">
<header style="width: 100%; height: 10vh; background: #002654; top: 2.5vh">
    <div id="green-strip"></div>
    <div class="container">
        <img src="../img/sd-logo.png" alt="logo" class="logo" width="300vw">

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Debate</a></li>
                <li><a href="#">Speech</a></li>
                <li><a href="#">Schedule</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

    </div>
</header>
</body>

</html>

CSS

#green-strip{
    width: 100%; height: 2.5vh;
    border-style: solid;
    border-color: #026f4d;
    background-color: #026f4d;
}

// nav bar container
.container {
    width: 100%;
    margin: 0 auto;
}

// nav bar background
// header {
//    width: 100%; height: 10vh;
//    background: #002654;
//    top: 2.5vh;
//}

// prevents container from shrinking after nav bar elements float
header::after {
    content: '';
    display: table;
    clear: both;
}

.logo {
    text-align: left;
}

nav {
    text-align: right;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-left: 2vw;
    margin-right: 2vw;

    position: relative;
}

nav ul li a {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.05vw;
    font-smooth: 2em;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

nav a:hover {
    color: #b6b8b6;
}

nav a::before {
    content: '';
    display: block;
    height: 0.35vh;
    width: 100%;
    background-color: #fff;

    position: absolute;
    top: -2vh;
    width: 0%;

    transition: all ease-in-out 250ms;
}

nav a:hover::before {
    width: 100%;
}

非常感谢。

Answer 1

这是因为您的徽标元素设置了错误的位置。尝试添加：

.logo {
  text-align: left;
  position: absolute;
}

“位置：绝对；”意味着您的徽标将被其他元素忽略，并且将始终出现在您希望它出现的位置

此外，在设计页面时，最好在 css 文件的开头删除边距和填充，如下所示：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Answer 2

您可以像@somedev 所说的那样通过将 display 设置为 flex 来确保将导航中的内容调整到中心。

#green-strip{
    width: 100%; height: 2.5vh;
    border-style: solid;
    border-color: #026f4d;
    background-color: #026f4d;
}

// nav bar container
.container {
    width: 100%;
    margin: 0 auto;
}

// nav bar background
// header {
//    width: 100%; height: 10vh;
//    background: #002654;
//    top: 2.5vh;
//}

// prevents container from shrinking after nav bar elements float
header::after {
    content: '';
    display: table;
    clear: both;
}

.logo {
    text-align: left;
}

nav {
    display: flex;
    text-align: right;
    justify-content: center;
}

nav img{
  position: absolute;
  left: 0;
}

nav ul {
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    right: 0;
}

nav li {
    display: inline-block;
    margin-left: 2vw;
    margin-right: 2vw;

    position: relative;
}

nav ul li a {
    font-family: 'Work Sans', sans-serif;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.05vw;
    font-smooth: 2em;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}

nav a:hover {
    color: #b6b8b6;
}

nav a::before {
    content: '';
    display: block;
    height: 0.35vh;
    width: 100%;
    background-color: #fff;

    position: absolute;
    top: -2vh;
    width: 0%;

    transition: all ease-in-out 250ms;
}

nav a:hover::before {
    width: 100%;
}

<!-- inline css styling to reset margins/padding -->
<body style="margin: 0; padding: 0">
<header style="width: 100%; height: 10vh; background: #002654; top: 2.5vh">
    <div id="green-strip"></div>
    <div class="container">
        <nav>
          <img src="../img/sd-logo.png" alt="logo" class="logo" width="300vw">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Debate</a></li>
                <li><a href="#">Speech</a></li>
                <li><a href="#">Schedule</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

    </div>
</header>

HTML 导航栏定位有问题

Having Problems With HTML Navbar Positioning

html

css

positioning

css-position