html - 如何在浮动元素上以百分比设置水平填充？

Question

我有这个菜单，里面有很多项目：

<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;
}

有任何想法吗？

谢谢你的帮助...

Answer 1

使用 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>