如何创建最大尺寸的顶部导航栏？

Question

我希望导航栏的“内容”具有最大尺寸。让我解释一下，我的导航栏有 100% 的宽度，但里面的内容没有，我不希望它有 100% 的大小，我需要导航栏与我的页面内容具有相同的大小（在这个case 是一个 800px 的例子）在我的主要文章中找到。

我正在使用 flexbox 创建我的导航栏属性

容器：

<div class="item">
// Content A
</div>

<div class="item">
// Content B
</div>

<div class="item">
// Content C
</div>

代表一个ul li a menu，一个是logo，一个是button

我怎样才能做到这种效果？

<!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">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            width: 100vw;
        }

        nav {
            width: 100%;
            max-height: 60px;
            background-color: black;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        .item {
            border-radius: 50%;
            width: 50px;
            height: 50px;
            background-color: #ccc;
        }

        main {
            max-width: 800px;
            background-color: #fff;
            width: 100vw;
            height: 100vh;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <nav>
        <div class="item">
        </div>
        <div class="item">
        </div>
        <div class="item">
        </div>
    </nav>
    <main>
        <article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
            ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam.
        </article>
        <br>
        <article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
            ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam. ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam. ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam. ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam.
        </article>
        <br>
        <article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
            ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam. ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam. ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam. ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam.
        </article>
        <br>
    </main>
</body>
</html>

已更新

好的，但是adiv的内容没有居中，是左对齐的

<!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">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            width: 100vw;
        }

        nav {
            width: 100%;
            max-height: 60px;
            background-color: black;

        }

        .item {
            border-radius: 50%;
            width: 50px;
            height: 50px;
            background-color: #ccc;
        }

        main {
            max-width: 800px;
            background-color: #fff;
            width: 100vw;
            height: 100vh;
            margin: 0 auto;
        }
        .container{
            max-width: 800px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

        }
    </style>
</head>

<body>
    <nav>
        <div class="container">
            <div class="item">
            </div>
            <div class="item">
            </div>
            <div class="item">
            </div>
        </div>
    </nav>
    <main>
        <article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
            ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam.
        </article>
        <br>
        <article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
            ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam. ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam. ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam. ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam.
        </article>
        <br>
        <article> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa ullam cumque nihil cupiditate sint
            ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam. ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam. ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam. ipsa nemo
            voluptatem minima amet dolore excepturi eos dolorem suscipit assumenda praesentium fugiat ducimus, magni
            quibusdam.
        </article>
        <br>
    </main>
</body>

</html>

Answer 1

如果你只想要一个 100% 的宽度 div，内部的实际 divs 为 800px 只需将导航保持在 100% 宽度，并将三个 divs 包裹起来在另一个 div 中，宽度为 800px。

<nav>
    <div class="container">
        <div class="item">
        </div>
        <div class="item">
        </div>
        <div class="item">
        </div>
    </div>
</nav>

<style>
    .container {
        width: 800px;
    }
</style>

如何创建最大尺寸的顶部导航栏？

How do I create a top navbar with a max size?

html

css

flexbox

已更新