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

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

1 个答案: