CSS/HTML：什么是；对",；如何创造这种效果？

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

这看起来完全正确，但我正在使用表来完成它。有没有一种“更正确”的方法可以使用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>

---

我喜欢我的解决方案，因为它非常健壮，但它肯定在HTML中包含布局信息，这是我一直试图避免的

好吧，用于布局的表格是错误的，用于菜单的表格是错误的

您应该这样做：

HTML:

---

好吧，用于布局的表格是错误的，用于菜单的表格是错误的

您应该这样做：

HTML: 试试这个：

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

#菜单{宽度：100%；}
#菜单a{显示：块；浮动：左；宽度：20%；
右边框：1px实心#000；文本对齐：居中；}
#菜单a.last{右边框：0px实心#000；清除：两者；}

试试这个：

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

#菜单{宽度：100%；}
#菜单a{显示：块；浮动：左；宽度：20%；
右边框：1px实心#000；文本对齐：居中；}
#菜单a.last{右边框：0px实心#000；清除：两者；}

一般认为导航栏是一个链接列表，因此它应该位于

标签中

我不会包含管道字符

|

，因为这也是一种表示。您可以使用

li:after{content:“|”；}

或通过添加CSS

border

属性将其添加到CSS中

---

有关水平设置列表样式的信息，请查看。

一般认为导航栏是链接列表，因此它应该位于标签中

我不会包含管道字符

|

，因为这也是一种表示。您可以使用

li:after{content:“|”；}

或通过添加CSS

border

属性将其添加到CSS中

---

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

我刚刚拼凑了一些东西，为您提供了一个想法。这是我经常使用的方法。您可以根据需要调整宽度。这是一把小提琴：

#菜单{
背景：#ECD8B1；
溢出：自动；
边框顶部：2件纯白；
底部边框：2件纯白；
填充：5px0px；
}
ulli{
宽度：24%；
右边框：1px实心#000；
浮动：左；
文本对齐：居中；
}
最后一次{
边界权：无；
}
李阿{
显示：块；
填充物：5px；
颜色：#000；
}

我刚刚拼凑了一些东西给你一个想法。这是我经常使用的方法。您可以根据需要调整宽度。这是一把小提琴：

#菜单{
背景：#ECD8B1；
溢出：自动；
边框顶部：2件纯白；
底部边框：2件纯白；
填充：5px0px；
}
ulli{
宽度：24%；
右边框：1px实心#000；
浮动：左；
文本对齐：居中；
}
最后一次{
边界权：无；
}
李阿{
显示：块；
填充物：5px；
颜色：#000；
}

您是否需要一些“动态”的东西（如果您添加更多项目，它会自动调整），或者您只是想用一种更具语义的方式在视觉上实现完全相同的东西？ul/ol和css可以很好地做到这一点——不管怎样，对于静态宽度（避免使用div，因为这实际上是一种列表结构）。取出边距并使用

display:block inline

或者，如果需要支持IE6，请保持原样：P@pst：您正在考虑

显示：内联块

（供将来参考）。@thirtydot:Dynamic会很好，但不是必需的。如果我再加一个项目，我不介意改变一些数字。兼容性将非常重要；这是一个处理老年人事务的律师事务所。@JoshuaD:这需要在IE6中工作吗？此外，我假设它必须在IE7中工作？您是否需要一些“动态”的东西（如果添加更多项，它会自动调整），或者您只是想用一种更具语义的方式在视觉上实现完全相同的东西？ul/ol和css可以很好地做到这一点——不管怎样，对于静态宽度（避免使用div，因为这实际上是一种列表结构）。取出边距并使用

display:block inline

或者，如果需要支持IE6，请保持原样：P@pst：您正在考虑

显示：内联块

（供将来参考）。@thirtydot:Dynamic会很好，但不是必需的。如果我再加一个项目，我不介意改变一些数字。兼容性将非常重要；这是一个处理老年人事务的律师事务所。@JoshuaD:这需要在IE6中工作吗？此外，我假设它必须在IE7中工作？这不是期望的功能。我知道，如果我想让项目折叠起来，这是可行的，但我想让它们展开到页面的一侧，并且无论包含的文本的宽度如何，它们之间的距离都是相等的。我正在研究内联块格式，这可能是个诀窍。我不确定当使用

float

时，如何反对表格——这对于希望不再有人使用它们的浏览器来说也是一种反常的攻击：）顺便说一句，这种侮辱性的语言是不必要的，特别是考虑到我来这里是说“我知道这是错误的方法，什么是正确的方法？”@JoshuaD，但你提到在HTML中使用样式元素，这是错误的，但没有使用结构元素（表）那么糟糕对于非表格数据。也可以使用

左/右填充：随便什么px；

来做。@pst我本来会使用

，但IE6和Netscape不喜欢这样：p这不是所需的功能。我知道如果我想让项目折叠，这会起作用，但我想让它们分散到页面的一侧，并且间隔相等包含文本宽度的eGardles。我是

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

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

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