Question

我在尝试使用chrome设置菜单时遇到了一些问题。菜单在ltr模式下看起来很好，但在从右到左模式下它在Chrome中断开。

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

Answer 1

我认为这很简单 - 你应该同时做到：

ul, li 
{
direction:rtl;
}

Answer 2

试试这个：

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

Chrome，从右到左问题<ul> </ul>

2 个答案: