html - 导航栏 而不是表格

Question

我知道在 html 中使用表格作为布局的一部分是不好的做法，所以想知道如何设置示例的样式，您可以参见 here使用 <ul>元素而不是表格。所有间距和字体大小都需要保持不变。

如有任何帮助，我们将不胜感激。

Answer 1

我会这样做:

(想法是使用 box-sizing 属性，以便能够安全地设置 width: 25%。)

HTML:

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS:

#nav {
    font-size: 20px;
}

#nav li {
    border-left: 1px solid #C3C3C3;
    float: left;
    width: 25%;
    text-align: center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#nav li:first-child {
    border: none;
}

#nav a {
    display: block;
    color: inherit;
    text-decoration: none;
}

现场演示: http://jsfiddle.net/dLBYe/8/