使用Zurb's Foundation 4时，在将内联列表居中时遇到麻烦。
预先构建的“文本中心”和“中心”的css类可用于其他元素，但不适用于列表。
这不起作用：
<div class="row">
<div class="large-12 columns text-center">
<ul class="inline-list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li><a href="#">Five</a></li>
</ul>
</div>
</div>
但是，删除此方法确实有效（但显然不是首选标记）：
<div class="row">
<div class="large-12 columns text-center">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
<a href="#">Four</a>
<a href="#">Five</a>
</div>
</div>
您对这种样式如何影响列表有什么建议吗？
谢谢。
我认为这就像将以下内容添加到CSS文件一样简单：
.inline-list{
display: table;
margin: 0 auto;
}
您也可以text-center从列div中删除该类。我创建了一个代码笔，http ://cdpn.io/rwJjf作为示例。我在示例中使用的是Foundation 5.0.3，但我认为这并不重要。
这是我使用的资源：
希望对您有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句