Html 如何使用列表和css创建此菜单？

我有一个类似菜单的菜单，但是你怎么能看到代码不是那么“好”

我希望单词和边框之间的边距总是5px，例如，对于每个单词

我知道我应该使用列表来处理这类内容，但我不知道如何应用css样式来实现跨浏览器兼容性

你能给我一个列表菜单的例子吗？

查看所有基本列表布局的例子

看起来您需要类似的内容。

查看所有基本列表布局的示例

看起来你想要这样的东西。

我就是这样做的：

请参见：

家
难以置信
一个

.菜单{
宽度：545px；
浮动：左；
保证金：0；
填充：0；
列表样式：无
}
李先生{
浮动：左；
文本对齐：居中；
填充：0 15px；
左边框：2件纯红
}
李：第一个孩子{
边界：0
}

我就是这样做的：

请参见：

家
难以置信
一个

.菜单{
宽度：545px；
浮动：左；
保证金：0；
填充：0；
列表样式：无
}
李先生{
浮动：左；
文本对齐：居中；
填充：0 15px；
左边框：2件纯红
}
李：第一个孩子{
边界：0
}

试试这个

小提琴：

.菜单
{
宽度：500px；
}
李先生
{
宽度：100px；
文本对齐：居中；
浮动：左；
右边框：1px纯红；
}

家
难以置信
一个

试试这个

小提琴：

.菜单
{
宽度：500px；
}
李先生
{
宽度：100px；
文本对齐：居中；
浮动：左；
右边框：1px纯红；
}

家
难以置信
一个

一个CSS3示例，由于它使用CSS3伪选择器，因此不真正跨浏览器

另一个示例使用管道字符分隔链接，并且跨浏览器安全：

---

一个CSS3示例，由于它使用CSS3伪选择器，所以不真正跨浏览器

另一个示例使用管道字符分隔链接，并且跨浏览器安全：

---

这就是我要做的，让它尽可能简单。它可能不会变得比这更复杂：

HTML

---

演示：

这是我要做的，让它尽可能简单。它可能不会变得比这更复杂：

HTML

---

演示：

边界之间的空间执行此操作=

在li的右侧放置边框，第二个按钮在li的左侧放置边框

现在添加左边距（或右边距），并看到它展开

这在我的情况下奏效了

---

祝你好运。

边框之间的空格可以这样做=

在li的右侧放置边框，第二个按钮在li的左侧放置边框

现在添加左边距（或右边距），并看到它展开

这在我的情况下奏效了

---

祝你好运。

首先，对于CSS问题，我不推荐使用JSFIDLE。它指定了一个Doctype，这会破坏任何开发兼容CSS的机会。你在说什么？您知道您可以将JSFIDLE上的Doctype更改为您想要检查兼容性的任何内容吗@眼镜蛇：你在说什么？JSFIDLE默认为HTML5 doctype，它触发标准模式。也许你说的是默认包含的重置样式表？您可以通过取消勾选“规范化CSS”来关闭此功能。首先，对于CSS问题，我不建议使用JSFIDLE。它指定了一个Doctype，这会破坏任何开发兼容CSS的机会。你在说什么？您知道您可以将JSFIDLE上的Doctype更改为您想要检查兼容性的任何内容吗@眼镜蛇：你在说什么？JSFIDLE默认为HTML5 doctype，它触发标准模式。也许你说的是默认包含的重置样式表？您可以通过取消勾选“规范化CSS”来关闭此功能。是的，它会晃动，但实际上边框和单词之间的空间并不相同。你知道我的意思吗？这就是我要找的：）@kwichz:我改变了我的答案。是的，它震动了：）P.s.那个填充物：0 15px；是跨浏览器的吗？因为我习惯于向左填充，向右填充，等等…啊，所以在IE6上，这段代码不起作用。不太好：（还有其他方法吗？谢谢！我会使用我想的最后一个版本：）（只是一个类）：）是的，它会摇晃，但事实上边框和单词之间的空间不一样。你知道我的意思吗？这就是我要找的：）@kwichz:我改变了我的答案。是的，它震动了：）P.s.那个填充物：0 15px；是跨浏览器的吗？因为我习惯于向左填充，向右填充，等等…啊，所以在IE6上，这段代码不起作用。不太好：（还有其他方法吗？谢谢！我会使用我想的最后一个版本：）（只是一个类）：）一些评论：你需要去掉最后一个

li

上的右边框。如果指定

float:left

，则不需要显式写入

display:block

。几个注释：需要去掉最后一个

li

上的右边框。如果指定

float:left

，则不需要显式写入

display:block

：last child

（CSS3）在IE8中不起作用，不幸的是，IE8被广泛使用。您应该尽可能使用

：first child

（CSS2），因为它在IE7+中工作。当然，你可以做我在评论我的答案时必须做的事情，因为OP显然关心IE6:/OMG，IE6，真的吗？：（我同意你的

：最后一个孩子

和

：第一个孩子

，并相应地修改了我的答案，但IE6不适合我的答案，因为我需要

<ul class="menu">
    <li>Home</li>
    <li>Incredible</li>
    <li>One</li>
</ul>

.menu { 
    width:545px;
    float:left;
    margin: 0;
    padding: 0;
    list-style: none
}
.menu li {
    float: left;
    text-align: center;
    padding: 0 15px;
    border-left: 2px solid red
}
.menu li:first-child {
    border: 0
}

<style type="text/css">
    .menu
    {
        width:500px;


    }
    .menu li
    {
        width:100px;
        text-align:center;
        float:left;


       border-right:1px solid red;

    }
    </style>
    <ul class="menu">
        <li>Home</li>
        <li>Incredible</li>
        <li>One</li>
    </ul>

<ul id="menu">
    <li>Home</li>
    <li>Incredible</li>
    <li>One</li>
</ul>

#menu {
    list-style-type: none; 
}
#menu li {
    display: inline-block;
    padding: 0 10px;
    border-left: 2px solid red;
} 
#menu li:first-child {
    border-left: none;
}