Question

对于网站项目，我们有一个简单的导航栏，其中每个链接都以灰色标出，并将鼠标悬停在黑色上。

我得到了它的工作，我的代码在这里：http://jsfiddle.net/BpjK8/ - 虽然我承认它有点脏，而且很讨厌＆＃39;在某种方式。（你可以看到当悬停链接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;。

Answer 2

试试这个css：

ul {
    margin: 50px auto;
    list-style:none;
}

li {
    display:block;
    float:left;
    border: 1px solid #CECECE;
    border-right: 1px solid #fff;
    padding: 2px;
}

li:last-child {
    display:block;
    float:left;
    border: 1px solid #CECECE;
    border-right: 1px solid #CECECE;
    padding: 2px;
}

li:hover {
    border: 2px solid #000;
    position: relative;
    z-index: 9999;
    padding: 1px;
}

a {
    position: relative;
    text-decoration: none;
    line-height: 40px;
    padding: 20px;
    color: #000;
}

样式导航栏：显示的替代方法：table / table-cell

2 个答案:

Demo Fiddle