Question

我的页脚当前有一系列不同大小的链接，随着页面宽度的减小，它会自动换行到下一行。

<ul class="footer-links">
  <li>text 1</li>
  <li>text 2</li>
  <li>text 3</li>
  <li>longer text 1</li>
  <li>text 4</li>
  <li>text 5</li>
  <li>longer text 2</li>
  <li>much longer text 1</li>
  <li>longer text 3</li>
  <li>text 6</li>
  <li>much longer text 2</li>
  <li>very much longer text 1</li>
  <li>text 7</li>
  <li>longer text 4</li>
</ul>

请参阅http://jsfiddle.net/X6EWn/

我想要的是让每个行始终居中，即使链接环绕。

关于如何实现这一目标的任何想法？

Answer 1

这会给你你想要的。请参阅小提琴：http://jsfiddle.net/harveyramer/NF2tm/

ul.footer-links {
    display: block;
    list-style-type: none;
    text-align: center;
}

ul.footer-links > li {
    margin: 3px 5px;
    display: inline-block;
}

Answer 2

哈维击中头部的钉子。但是，可以通过将ul s font-size设置为0，然后在fontsize上声明li，以便删除每个之间令人讨厌的空白区域来改善它li。代码低于......

ul.footer-links {
    display: block;
    list-style-type: none;
    text-align: center;
    font-size: 0;
}

ul.footer-links > li {
    margin: 3px 5px;
    display: inline-block;
    font: 100 12px/20px 'Arial', sans-serif;
}

哈维最先回答问题。

具有中心链接的可变宽度页脚

2 个答案: