CSS/HTML：创建这种效果的“正确”方法是什么？

Question

我正在为一家小型律师事务所开发网站。顶部有一个菜单栏，我想与 | 等间距。每个项目之间： Link。 （标题横幅正下方的白条）

这看起来完全正确，但我正在使用表格来完成它。使用 XHTML/CSS 是否有“更正确”的方法？

我的代码如下：

<div id="topMenu" class="spanningMenu">
        <table>
            <tr>
                <td class="topMenuEnd"></td>
                <td class="topMenuMiddle"><a href="index.htm">Home</a></td>
                <td class="topMenuMiddle">|</td>
                <td class="topMenuMiddle"><a href="contact.htm">Contact Us</a></td>
                <td class="topMenuMiddle">|</td>
                <td class="topMenuMiddle"><a href="directions.htm">Directions</a></td>
                <td class="topMenuMiddle">|</td>
                <td class="topMenuMiddle"><a href="disclaimer.htm">Disclaimer</a></td>
                <td class="topMenuEnd"></td>
            </tr>
        </table>
    </div>

还有 CSS：

.spanningMenu {
    border-style: solid;
    border-width: 4px 0px;
    padding: .2em;
}

#topMenu td.topMenuMiddle {
    width: 12.5%;
}

#topMenu td.topMenuEnd {
    width: 6.25%;
}

我喜欢我的解决方案，因为它非常健壮，但它肯定在 HTML 中包含布局信息，而我一直在努力避免这种情况。

Answer 1

好吧，布局的表格是错误的，菜单的表格是不正当的......

Please please please read this

你应该这样做：

HTML：

<ul>
    <li>Item1 |</li>
    <li>Item2 |</li>
    <li>Item3</li>
</ul>

CSS：

ul li {
    float:left;
    margin-left:5px;
}

http://jsfiddle.net/Mutant_Tractor/wyQFb/

Answer 2

我刚刚拼凑了一些东西来给你一个想法。这是我一直使用的方法。您可以根据需要调整宽度。这是一个小提琴：http://jsfiddle.net/pfkgw/

#menu {
    background:#ECD8B1;
    overflow:auto;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    padding: 5px 0px;
}
ul li {
    width: 24%;
    border-right:1px solid #000;
    float:left;
    text-align:center;
}

ul li.last {
    border-right:none;
}

li a {
    display:block;
    padding:5px;
    color:#000;
}

<div id='menu'>
    <ul>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Contact Us</a></li>
        <li><a href='#'>Directions</a></li>
        <li class='last'><a href='#'>Disclaimer</a></li>
    </ul>
</div>

Answer 3

一般认为导航栏是一个链接列表，所以应该在<ul></ul>标签中。

我不会包含管道字符|，因为那是也是表示性的。您可以使用 li:after { content: "|"; } 或添加 CSS border 属性将其添加到 CSS 中。

有关横向设置列表样式的信息，请查看Listamatic。

Answer 4

试试这个：

<style type="text/css">
#menu { width: 100%; }
#menu a { display: block; float: left; width: 20%;
border-right: 1px solid #000; text-align: center; }
#menu a.last { border-right: 0px solid #000; clear: both; }
</style>

<div id="menu">
<a href="/">Link 1</a>
<a href="/">Link 2</a>
<a href="/" class="last">Link 3</a>
</div>