覆盖父元素的宽度

Question

http://www.mysecretathens.gr/kulte_test/as_index.html

我正在尝试覆盖底部#kontainer列表中<li>的宽度。我希望.nav3列表为全宽，100％，但我无法覆盖父元素的700px，#kontainer

我该怎么办？我尝试了!important;规则，但这并没有给我我想要的结果。

Answer 1

指定百分比宽度时，它会根据父级的宽度进行计算。所以700％的100％是...... 700.

如果您希望它超过700，则需要指定像素宽度。

Answer 2

解决方案1：您可以从.nav3获取#kontainer

解决方案2 ：您可以将position: absolute; left: 0;添加到.nav3，然后在margin-top上添加一些#footer来推送它。

Answer 3

宽度100％表示获取子项所在的父元素的100％。它实际上做你说它做的！您可以从#kontainer中获取nav3以获取100％的body元素。

Answer 4

我想要同样的事情来覆盖父宽度。 我正在开发一个Joomla组件

  

<div class="container mainbody"> // ** width 1170px ** //

     

    

      

<div>部分内容</div>

             

<div>部分内容</div>

    

  

     

</div>

我不想更改外部div或.container类的宽度（1170px），因为它是Joomla模板中的默认值，如果我更改，它将在每个页面生效。

在我的情况下，对于某些设计，我在网站主页上只需要100％的宽度。

我所做的是在主页html文件中添加css，因为它不会在其他页面中调用。

  

<div class="container mainbody">

     

    

      

<div class="container">一些内容，宽度为1170px </div>

             

<div>一些内容，宽度为100％</div>

    

  

     

</div>

     

<style type="text/css">

     

    

.mainbody

         

{

         

      

        

宽度：100％！重要;

      

    

         

}

  

     

</style>

Answer 5

对于想要整页宽度的div，您应该使用：

position: absolute;
left: 0px;
right 0px; //but make sure that any content you have below that div, gets margined in response.
margin-top: 200px; //Use the height of the above div

Answer 6

我刚刚注意到一种＆＃34;非常＆＃34; 有趣（和粗体）的方式来覆盖父元素的宽度。将孩子的宽度设置为：

宽度：计算（100％+ 30％）;

信不信由你，至少Firefox 51正在正确计算孩子的宽度，是的，它大于父母的宽度。