Question

我正在尝试找到一种简单的方法，让所有链接均匀分布在水平导航上。如果它是固定数量的链接，这将是非常容易的，但它们将是动态的。

所以它可能是5或10个链接，没有人知道。尽管链接数量很多，但我希望它们能够在导航中使用表格无需均匀分布。

我不想使用表的原因是因为它会打破UL LI结构，这显然是构建导航（SEO）时的方式。

这是一个jsFiddle更深入地解释它：http://jsfiddle.net/pkK8C/19/

寻找最轻量级方法。

提前谢谢。

Answer 1

旧的浏览器可能会令人头痛，但它适用于新浏览器：

div#navigation ul {
    list-style-type:none;
    height:30px;
    text-align:center;
    width: 100%;      /* new */
    display: table;   /* updated */
}

div#navigation ul li {        
    margin-left:50px;
    display: table-cell;  /* updated */  
}

Answer 2

display: table使用UL，display: table-cell使用LI。如果重要的话，还有display-table.htc IE6 / 7。

Answer 3

这是一个jQuery解决方案，它将链接均匀地分散到100％的限制元素。最左边和最右边的链接都是对接的。

jQuery的：

pad_menu（）增加填充，直到最后一个li浮动到第一个以下然后将填充减少一个，因此最后的li返回到同一行。 var i停止无限循环（无论如何都不应该发生）。

  $(document).ready(function(){
    pad_menu();
  });

  function pad_menu() {
    var i = 0;
    var pos_first;
    var pos_last;
    var pad = $('#menu li').css('padding-left').replace(/[px]/, '');

    do {
      pad++;
      $('#menu li').css('padding-left', pad);
      $('#menu .first-item').css('padding-left', 0);
      $('#menu .last-item').css('padding-left', 0);
      pos_first = $('#menu .first-item').position();
      pos_last = $('#menu .last-item').position();
    } while (pos_first.top == pos_last.top && ++i < 100)
    $('#menu li').css('padding-left', pad-1);
    $('#menu li.first-item').css('padding-left', 0);
    $('#menu li.last-item').css('padding-left', 0);
  }

HTML＆amp; CSS：

ul#menu li {
display: inline;
float: none;
padding: 5px 0px 5px 20px;
}
ul#menu li.first-item, ul#menu li.last-item {
padding-left: 0px;
}

<ul id='menu' class='cols'>
  <li class='first-item'><a href='page1.html'>Page 1</a>
  <li><a href='page2.html'>Page 2</a></li>
  <li><a href='page3.html'>Page 3</a></li>
  <li><a href='page4.html'>Page 4</a></li>
  <li><a href='page5.html'>Page 5</a></li>
  <li><a href='page6.html'>Page 6</a></li>
  <li><a href='page7.html'>Page 7</a></li></a></li>
  <li class='last-item'></li>
</ul>

Answer 4

这里有一个更好的解决方案，您可以使用text-align:justify：

How do I *really* justify a horizontal menu in HTML+CSS?

请仔细阅读接受的答案，但以下警告适用：

您的LI文字中的空格需要替换为&ensp;或他们被视为逻辑项之间的空格（ 没有工作）
您的LI之间需要有HTML空格（可以如果你是在PHP循环中生成它们，那就好了。

在水平导航上均匀分布链接

4 个答案: