css 可以忽略正文中的最大宽度吗

vsdwdz23 于 2023-02-06 发布在其他

关注(0)|答案(2)|浏览(126)

我想在我的页面上的内容有一个最大宽度为2024px，但我想我的导航栏跨越整个页面
可惜我不知道怎么解

css

来源：https://stackoverflow.com/questions/75329895/can-i-ignore-a-max-width-in-body

2条答案

按热度按时间

cigdeys31#

只需将页面内容放在main标签中，并将main的最大宽度设置为1024px

main {
  max-width: 1024px;
}

nav {
  width: 100%;
}

<html>
  <body>
    <header>
      <nav>
        <ul>
          <li>Lorem</li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Lorem</h1>
      <p>Lorem</p>
    </main>
  </body>
</html>

赞(0）回复(0）举报 2023-02-06

j8ag8udp2#

<body>
    <header>
        <img src="" alt="Logo">

        <nav>
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>

                <li>
                    <span>|</span>
                </li>

                <li>
                    <a href="/">Lorem Ipsum</a>
                </li>

                <li>
                    <span>|</span>
                </li>
                
                <li>
                    <a href="/">Lorem Ipsum</a>
                </li>

                <li>
                    <span>|</span>
                </li>

                <li>
                    <a href="/">Lorem Ipsum</a>
                </li>

                <li>
                    <span>|</span>
                </li>

                <li>
                    <a href="#">Lorem Ipsum</a>
                </li>
            </ul>
        </nav>
    </header>

    <h1 id="main_title">
        Lorem Ipsum
    </h1>

    <p id="main_text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod veritatis, aliquid omnis, autem quaerat culpa consectetur provident dicta repellat numquam eveniet distinctio. Accusantium exercitationem eos nam quia odit ipsa reprehenderit?
    </p>

</body>
</html>

body {
    background-color: #242424;
    max-width: 1024px;
}

header {
    z-index: 99;
    display: flex;
    border-bottom: #242424;
    box-shadow: 0px 4px 20px #000000;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    width: 100%;
    top: 0;
    backdrop-filter: blur(25px);
    
    img {
        width: 100px;
        padding: .75rem
    }

    nav {
        margin: 0 3rem 0 0;

        ul {
            li {
                display: inline;
                list-style-type: none;
                padding: 0 .5rem 0 .5rem;

                a {
                    font-size: 1.3rem;
                    transition: 2s;

                    ::hover {
                        transform: translateX(10px);
                    }
                }
                span {
                    font-size: 1.5rem;
                    color: #fff;
                }
            }
        }
    }
}

赞(0）回复(0）举报 2023-02-06

我来回答

css 可以忽略正文中的最大宽度吗

2条答案

相关问题

热门标签

最新问答