我怎样才能使用列表和CSS来做这个菜单？ [英] How can I do this menu using list and css?

问题描述

我有一个像这一个这样的菜单，但是如何看到代码并非如此好的。

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

我知道我应该使用List来处理这种东西，但我不知道如何将CSS样式与跨浏览器兼容性应用。

你可以给我一个带有List的菜单的例子吗？

解决方案

这就是我的做法：

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

 < ul class =menu> 
< li>主页< / li> 
< li>令人难以置信< / li> 
< li> One< / li> 
< / ul> 
 
 .menu {
 width：545px; 
 float：left; 
保证金：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 
} 
  

I have a sort of menu like this one, but how you can see the code is not so "well".

I'd like that margin between word and border is always 5px for example, for every word.

I know I should use List for this kind of stuff, but I don't know how to apply css style with cross-browser compatibility.

Can you give to me an example of that menu with List?

解决方案

This is how I'd do it:

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

这篇关于我怎样才能使用列表和CSS来做这个菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！