如何使用jQuery对列表项进行水平对齐

Question

我已经遍布stackoverflow寻找一个可靠的解决方案;但是，我差不多了。我相信我的问题只是在我的语义中。

http://jsfiddle.net/hzRAN/10/ 这是一些示例代码。

为了获得最佳效果：如果页面宽度发生变化，我希望此脚本重新调整。

真实代码是从这个网站链接的 http://designobvio.us/DoUs/Blog.html 它是一个流畅的布局，这就是我需要水平列表项来正确证明自己的原因。

感谢您的帮助！

Answer 1

您可以通过设置每个列表项的宽度或使用填充来实现此目的的唯一方法：

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;   /* remove the indention */
  overflow: hidden;   /* to enclose the float children */
  }

li {
  width: 20%;  /* actually, use some slightly undersized value to supply a bit of slop */
  float: left;
  }

Answer 2

如果您希望使用jQuery来实现此目的，请使用window.resize函数，然后在加载时调用该函数。

$(document).ready(function(){

    $(window).resize(function() {
    // your code here:


    });    
    $(window).resize();
});​

我已经设法在jsfiddle（我分叉你的）http://jsfiddle.net/rSeaE/1/上运行了一个快速示例，但由于我认为#daymenu的宽度而导致其出现问题。