html - 親要素の幅をオーバーライドする

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 を取得して、body 要素を 100% 取得できます。

Answer 4

親の幅をオーバーライドするには、同じことが必要です。Joomla コンポーネントを開発しています

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

<div>いくつかのコンテンツ</div>

<div>いくつかのコンテンツ</div>

</div>

外側の div または .container クラスの幅 (1170px) を変更したくありません。変更するとすべてのページで有効になる Joomla テンプレートのデフォルトであるためです。

私の場合、Web サイトのホームページのいくつかのデザインの子 div に 100% の幅しか必要ありません。

私がしたことは、他のページでは呼び出されないため、ホームページのhtmlファイルにcssを追加することです。

<div class="container mainbody">

<div class="container">一部のコンテンツ、幅 1170px</div>

<div>一部のコンテンツ、幅 100%</div>

</div>

<style type="text/css">

。本体

{

幅:100% !重要;

}

</style>

Answer 5

親要素の幅をオーバーライドする「非常に」興味深い (そして大胆な) 方法に気付きました。子の幅を次のように設定します。

幅: 計算(100% + 30%);

信じられないかもしれませんが、少なくとも Firefox 51 は子の幅を正しく計算しています。もちろん、親の幅よりも大きくなっています。