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

时间:2011-03-18 18:58:22

标签: html css xhtml w3c

我在一个小型律师事务所的网站上工作。顶部有一个菜单栏,我希望与|等距离每个项目之间: 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中有布局信息,我一直在努力避免。

4 个答案:

答案 0 :(得分:2)

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

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/

答案 1 :(得分:1)

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

我不会包含竖线字符|,因为它也是 表示。您可以使用li:after { content: "|"; }或添加CSS border属性在CSS中添加它。

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

答案 2 :(得分:1)

我刚刚一起黑客攻击,给你一个想法。这是我一直使用的方法。您可以根据需要调整宽度。这是一个小提琴: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>

答案 3 :(得分:0)

试试这个:

<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>