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

Question

我正在一个小型律师事务所的网站上工作。 顶部有一个菜单栏，我希望与|等距离 每个项目之间： 链接 。 （标题横幅下方的白色条）

这看起来完全正确，但我正在使用表来完成它。 使用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

好的，布局表是错误的，MENUS表只是反常...

请看这个

你应该这样做：

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

通常认为导航栏是链接列表，因此它应该在<ul></ul>标记中。

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

有关水平样式化​​列表的信息，请查看Listamatic 。

Answer 3

我刚刚把一些东西钉在一起给你一个主意。 这是我一直使用的方法。 您可以根据需要调整宽度。 这是一个小提琴： 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 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>