1

次の HTML ブロックがあります。

  <div class="container clearfix">
  <div class="grid_8 omega">
     <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Cupcakes &amp; Prices</a></li>
        <li><a href="#">Locations</a></li>
        <li class="last"><a href="#">Contact Us</a></li>
    </ul>
 </div>

このようにスタイルされています：

ul.nav {
  margin-top: 18.18%;
  list-style: none;
  float: right;
}

ul.nav li {
  float: left;
  margin-right: 40px;
}

これにより、次の結果が得られます (Web 開発者ツールバーのアウトライン):

スクリーンショット1

現在、サイトをより流動的にするために 40px のマージンをパーセンテージに変更しようとしています。この場合、40px / 660px = 0.06 である target / context = result を使用する必要があることを学びました。これは約 6% です。次に、40px を 6% に変更すると、代わりに次のようになります。

スクリーンショット2

ここで私は何を間違えましたか？ブラウザー ウィンドウのサイズを変更しても、ul ブロッ​​クの幅が縮小し、margin-right が変化しません。私が入れたパーセンテージの量に関係なく、これを機能させるパーセンテージの値はまったくないようです。パーセンテージを間違って使用している必要がありますか? なぜ機能しないのですか？

4

2 に答える 2

3

わかりました、@AliBassam のコメントのおかげでわかりました

彼が言ったように、margin-right のパーセンテージはulではなく親要素に関連していdivます。ブロックの幅は、要素が持つul余白の量に関連していますliが、その余白が幅のパーセンテージであるul場合、両方の要素が互いに依存しており、意味がありません。

これを修正するには、ul.nav に幅を設定する必要があります。

ul.nav {
  width: 83%;
  margin-top: 18.18%;
  list-style: none;
  float: right;
}

これは 600px の 83% で、約div500pxul.navに変換されます

于 2013-06-02T05:03:36.740 に答える
0

高さがわからないので、18.8% がわかりません。最初に html と body を 100% の高さで宣言する必要があります。そしてその中のすべてのもの...それはトリッキーです。@Mr_Greenが言うように...それは非常識なので幅に基づいています!!! また... 18.8 os a wack number. (ULと同じ...何の6.3498%...?)

于 2013-06-02T04:49:51.963 に答える