Html 如何在浮动元素上设置以百分比表示的水平填充？

我有一份菜单，里面有很多项目：

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

现在的问题是，我希望在浏览器窗口更改时调整项目的水平填充（“响应性设计”）。所以我试了一下：

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

然而，这不起作用。当我使用百分比时，列表项根本没有填充

我怎样才能让它工作

父元素也已正确设置：

ul {
  width: 960px;
}

有什么想法吗

---

感谢您的帮助…

使用jquery操作

元素的填充。 也给他们一个类，你将通过它来选择他们

也许可以试试这个：

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);
});
*/      

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

ul {
  width: 960px;
}


li {
  float: left;
}

​

html代码

/* 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);
});
*/      

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

ul {
  width: 960px;
}


li {
  float: left;
}

​

---

​

它在Chrome中似乎运行良好-您使用的是什么浏览器？在Safari和Firefox中也可以。您是否尝试使用display inline block而不是float leftOK，解决了这个问题。实际上，我把

a

元素包装在那些

li

元素中，并对这些元素应用了填充。所以我上面发布的代码确实有效，我只是没有意识到：-）佐尔坦的要点真的让我大开眼界。谢谢谢谢你的帮助！不过，对于这么简单的东西，我并不真正喜欢jQuery解决方案。