当你有一个容器时如何使全宽

Question

大家好，我需要帮助，我正在尝试使导航全宽，但它在 div 名称包装内，宽度设置为 900，我无法想象我该怎么做，我不想创建另一个 div 就像 header 我想要一种方法，我可以在包装器内设置任何东西的全宽度以减少编码，这里是 HTML。 P.S 请让代码易于理解，我只是一个新手..

<html>
    <head>
        <title>MY TITLE</title>
        <link rel="stylesheet" href="design.css">
    </head>

    <body>
        <div class="full">
            <div class="box">
                <h1>HEAD</h1>
            </div>
        </div>
            <div class="wrapper">
            <div class="list">
                <ul>
                    <li>Home</li>
                    <li>About Us</li>
                    <li>Contact Us</li>
                </ul>
            </div>
        </div>
    </body>
</html>

而这里是 CSS

*{
    padding:0px;
    margin:0px;

}

.wrapper{
    margin:0 auto;
    width:900px;
    border:1px solid red;
    background:green;

}
.full{
    width:100%;
    background:black;

}
.box{
    text-align:center;
    color:red;
    width:500px;
    margin:0px auto;
    background:black;

    }
.list{
    margin:0 auto;
    width:500px;

    }
ul li {
    display:inline;
    list-style-type:none;
    padding-right:30px;
   }

Answer 1

试试这个。尝试删除 width:900px;

或者做到width: 100%;

.wrapper{
    margin:0 auto;
    border:1px solid red;
    background:green;

}

Answer 2

尝试使用以下 css -

body { position: relative; }
.list { height: 35px; left: 0; position: absolute; right: 0; top: 38px; width: 100%; }
.list > ul { margin: 0 auto; max-width: 900px; padding: 7px 0; text-align: center; }

由于您希望将内容保存在包装器中而不添加任何新内容div，这对我来说似乎是一个解决方案。

当你有一个容器时如何使全宽

how to make full width when u have a container

html

css

header

width

footer