主页 / 问题 / 1423932
Accepted
Андрей
Asked:2022-08-26 02:27:19 +0000 UTC2022-08-26 02:27:19 +0000 UTC

固定定位，块的全部内容被打乱

  • 772

我想制作一个固定的标题，但是当我设置位置时，固定链接在徽标下移动

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

h1, h2, h3, h4, h5, h6 {
    color: black;
}

body {
    font-family: sans-serif;
    font-size: 20px;
    padding: 20px;
    color: gray;
    background: #d5d6d0;
    height: 100%;
}

#container {
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}

#header {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

#nav-bar {
    display: flex;
    justify-content: space-evenly;
    width: 40%;
    flex-wrap: wrap;
}

a {
    text-decoration: none;
    color: inherit;
}
<header id="header">
  <img src="img/product-landing-page-logo.png" alt="" width="400">
  <nav id="nav-bar">
    <a href="#features">Features</a>
    <a href="#guide">How It Works</a>
    <a href="#pricing">Pricing</a>
  </nav>
</header>

html

1 个回答

  1. Best Answer

    您没有设置标题宽度

    #header {
    position: fixed;
    display: flex;
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
}
    • 1

相关问题