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

你好我需要帮助即时尝试使导航全宽，但其内的div名称包装已设置宽度900我不能想象我怎么能做到这一点我不想要创建另一个div，如头部我想要的方式，我可以在包装器内设置任何东西的全部宽度，以减少编码，这里是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; 
    }

来源

2015-08-21 Shauiosbhaoiu Aousiguosba

正如你想要'div'中类'wrapper'的东西比'900px'宽吗？ – Jay

挤压比它的容器大的东西是可能的，但在这种情况下，它当然不是最佳实践。你知道你可以有两个包装，对吧？一种是全宽度，包含任何需要100％宽度的东西和一个只有900px的内部宽度。 – Neil

因为元素在900px的包装下，所以不能超过900px。它将占用900px的全宽，您可以定位固定的顶部0，但它将始终粘在窗口顶部。这将是100％的窗口。 – Vinayak

尝试使用下面的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，这似乎是我的一个解决方案。

来源

2015-08-21 09:36:48

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

或使其width: 100%;

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

 
}

来源

2015-08-21 09:29:10

这正在改变他的问题的先决条件，而不是修复它。 – Neil

我只想在包装的某个部分是全宽，如果我这样做，包装内的所有将是100％宽度 –

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

回答

相关问题