Question

我有一种像this one这样的菜单，但你怎么能看到代码并不那么“好”。

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

我知道我应该使用List来做这种事情，但我不知道如何应用具有跨浏览器兼容性的css样式。

你能给我一个带List的菜单的例子吗？

Answer 1

我就是这样做的：

请参阅： http://jsfiddle.net/thirtydot/554BT/3/

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

Answer 2

这就是我这样做的方式，让它尽可能简单（简单）。它可能不会比这更复杂：

HTML

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

CSS

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

DEMO：jsfiddle

Answer 3

查看Listmatic以获取所有基本列表布局的示例。

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

Answer 4

试试这个......

小提琴：http://jsfiddle.net/anish/Laqqn/

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

Answer 5

一个CSS3示例，因为它使用CSS3伪选择器而不是真正的跨浏览器 CSS3 List menu

此另一个示例使用竖线字符分隔链接，并且跨浏览器安全： CSS2 List menu

Answer 6

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

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

现在添加margin-left（或margin-right）并看到它展开。

这适用于我的情况。

祝你好运。

如何使用list和css执行此菜单？

6 个答案: