html - 样式导航栏 : alternative to display:table/table-cell

Question

对于一个网站元素，我们有一个简单的导航栏，其中每个链接都用灰色勾勒出来，悬停时用黑色勾勒出来。

我让它工作了，我的代码在这里:http://jsfiddle.net/BpjK8/ -- 尽管我承认它在某种程度上有点肮脏和“hacky”。 (你可以看到当悬停链接 A 时，它旁边的链接 B 的边框是可见的，这有点让人分心。)

我的问题是:在不使用 display: table 和 display: table-cell 的情况下，能否以更好的方式完成此操作？如果答案涉及 display: inline 或 float: left 就好了，但我无法使边框效果正常工作。

Answer 1

Demo Fiddle

当然!添加:

body{
    text-align:center; /* centre the content */
}

然后将你的 ul 设置为 display:inline-block 让它可以居中，并给你的 li:

float:left;
display:block;

所以他们一个接一个正确显示。

然而，您可能不想将整个文档居中，因此您可能希望将 ul 包装在 div 中，并使用 text-align:center; 设置。