3

我在尝试在 chrome 中设置菜单样式时遇到了一些问题。菜单在 ltr 模式下看起来不错，但在从右到左模式下，它会在 Chrome 中中断。

我在这里有一个小提琴：http: //jsfiddle.net/YKger/

在firefox中，ltr中的菜单是“一-二-三”，rtl中是“三-二-一”。它镀铬总是呈现为“一二三”。

知道为什么会发生这种情况，或者我如何在没有第一个“li”跨越整个菜单的情况下设置它的样式？

谢谢，

另外，这里的代码：

<!doctype html>
<head>

<style>
.navigation { float:right; }

ul#main-menu {
list-style-type: none;
direction:rtl;
}

li {
border: 2px solid black;
padding: 5px 10px;
position: relative;
}

ul#main-menu span#tail1 {
position:absolute;
bottom:-21px;
left:10px;
width:0;height:0;
border-color:#000000 transparent transparent transparent;
border-style:solid;
border-width:10px;
}

ul#main-menu span#tail2 {
position:absolute;
bottom:-18px;
left:10px;
width:0;height:0;
border-style:solid;
border-width:10px;
}

ul.inline li {
display:inline;
}
</style>


</head>

<body>
<nav class="navigation">
<ul id="main-menu" class="links inline clearfix main-menu">
<li class="menu-1501 first"><a href="/fa/blogs" title="">One</a><span id='tail1'>    </span>
<span id='tail2'></span></li>
<li class="menu-1014"><a href="/fa/node/2" title="">Two</a><span id='tail1'></span><span id='tail2'></span></li>
<li class="menu-1759 active-trail last active"><a href="/fa/projects" class="active-trail active">Three</a><span id='tail1'></span><span id='tail2'></span></li>
</ul>
</nav>
</body>

</html>
4

2 回答 2

2

我认为这是最简单的方法 - 你应该做你的两个：

ul, li 
{
direction:rtl;
}
于 2014-01-06T18:01:41.870 回答
0

尝试这个：

.navigation { float:right; }

ul#main-menu {
list-style-type: none;
direction:rtl;
}

li {
border: 2px solid black;
padding: 5px 10px;
position: relative;
}

ul#main-menu span#tail1 {
position:absolute;
bottom:-21px;
left:10px;
width:0;height:0;
border-color:#000000 transparent transparent transparent;
border-style:solid;
border-width:10px;
}

ul#main-menu span#tail2 {
position:absolute;
bottom:-18px;
left:10px;
width:0;height:0;
border-style:solid;
border-width:10px;
}

ul.inline li {
display:inline-block;
}
于 2013-03-03T19:25:54.900 回答