0

このメニューにはいくつかのアイテムが含まれています。

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

項目は、次のように CSS で簡単に実現できる隣同士に表示される必要があります。

li {
  float: left;
}

問題は、ブラウザ ウィンドウが変更されたときにアイテムの水平方向のパディングを調整することです (「レスポンシブ デザイン」)。だから私はこれを試しました：

li {
  float: left;
  padding: 0 5%; /* does NOT work */
  padding: 0 10px; /* does work */
}

ただし、これは機能しません。パーセンテージを使用すると、リスト項目にパディングがまったく適用されません!

どうすればこれを機能させることができますか?

親要素も正しく設定されています。

ul {
  width: 960px;
}

何か案は？

助けてくれてありがとう...

4

1 に答える 1

0

jquery を使用して、<li>要素のパディングを操作します。また、それらを選択するクラスを指定します。

たぶんこれを試してみてください： http://jsfiddle.net/infoman/tUKPf/

jQuery コード

/* just a show case */
$('.dyn').live('click', function() {
   var w = $(window).width(),
   paddingRight = w / 100 * 5; 
   $('.dyn').css('padding-right', paddingRight);
});


/* use this to fire the css changes on window reload */
/*
$(window).resize(function() {
   var w = $(window).width(),
   paddingRight = w / 100 * 5; //
   $('.dyn').css('padding-right', paddingRight);
});
*/

htmlコード

<ul>
  <li class="dyn">Item 1</li>
  <li class="dyn">Item 2</li>
  <li class="dyn">Item 3</li>
</ul>​

CSSコード

ul {
  width: 960px;
}


li {
  float: left;
}

​

</p>

于 2012-11-03T20:00:33.347 に答える