带居中链接的可变宽度页脚答案

【问题标题】：Variable Width Footer with Centered Links带居中链接的可变宽度页脚
【发布时间】：2014-02-27 10:17:23
【问题描述】：

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

<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/

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

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

【问题讨论】：

为什么不让它们内联呢？ jsfiddle.net/X6EWn/1
"每一行居中"这样吗？ jsfiddle.net/X6EWn/2
谢谢滴滴，但我希望这些部分保持稳定，你的部分在换行时将“非常长的文本 1”拆分成多行......卢西奥，我仍然想要环绕......

标签： html css responsive-design centering

【解决方案1】：

哈维一针见血。但是，可以通过将uls font-size 设置为0，然后在li 上声明fontsize 来改善它，以便删除每个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;
}

最初的功劳归于 Harvey，因为他首先回答了问题。

【讨论】：

嗯，这看起来很老套，我在真正的页脚中使用了填充/边距......不过谢谢你的想法
如何“非常hacky”？这样做没有任何无效或不正常的地方。这是一种已经使用多年的技术，它只允许您删除在每个 li 之间自动生成的不需要的空间。
我是说与其使用字体大小来去除对象之间的空间，不如使用盒子模型（填充/边距）...此外，调整间距不是问题的一部分
我知道这不是问题的一部分，但是如果抛出诸如“非常 hacky”之类的内容，我认为要求解释是不合理的。

【解决方案2】：

这会给你你想要的。见小提琴：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;
}

【讨论】：

完美...我一定是脑子有问题，因为这太简单了...谢谢=）