logo标签列表

如何使导航栏与标题对齐

htmlcss
3

https://istack.dev59.com/3hzl7.webp

我正在创建我的网站，但我的导航栏与标题（h1）不在同一行。如何解决？

#header {
    background-color: #39A15A;
}

#navigation {
    overflow: hidden;
}

ul {
    list-style-type: none;
}

li {
    display: inline;
    float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Learning</title>
</head>
<header>
    <div id="header">
        <h1>Filip Moslavac</h1>
        <div id="navigation">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="Contact Page/contact.html">Contact</a></li>
            <li><a href="Project Page/projects.html">Projects</a></li>
        </ul>
        </div>
    </div>
</header>
<body>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
</div>
<div id="footer">
Copyright &copy; 2021 Filip Moslavac
</div>
</body>
</html>

2个回答
0
你可以尝试在你的页眉上使用 display: flex; 和 align-items: baseline; 使它们与你的页眉对齐。
我还添加了一些额外的样式来清理它。我在你的 #header ul 上放置了一个 display: flex; 并添加了间隔以分隔列表项。 

#header {
    background-color: #39A15A;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

#header ul {
  display: flex;
  gap: 20px;
}

#navigation {
    overflow: hidden;
}

ul {
    list-style-type: none;
}

li {
  padding: 15px;
}

footer {
  position: fixed;
  bottom: 0;
  height: 30px;
  background-color: lightgrey;
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  min-height: calc(30px - 100vh);
}

body {
  margin: 0;
}

#content {
  padding: 15px;
}

h1 {
  padding: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Learning</title>
</head>
<header>
    <div id="header">
        <h1>Filip Moslavac</h1>
        <div id="navigation">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="Contact Page/contact.html">Contact</a></li>
            <li><a href="Project Page/projects.html">Projects</a></li>
        </ul>
        </div>
    </div>
</header>
<body>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
</div>
<div id="footer">
<footer>Copyright &copy; 2021 Filip Moslavac</footer>
</div>
</body>
</html>

0

#header {
    background-color: #39A15A;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#navigation {
    overflow: hidden;
    
}

ul {
    list-style-type: none;
    display: flex;
}

li {
    display: inline;
    float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Learning</title>
</head>
<header>
    <div id="header">
        <h1>Filip Moslavac</h1>
        <div id="navigation">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="Contact Page/contact.html">Contact</a></li>
            <li><a href="Project Page/projects.html">Projects</a></li>
        </ul>
        </div>
    </div>
</header>
<body>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
</div>
<div id="footer">
Copyright &copy; 2021 Filip Moslavac
</div>
</body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接