3

Chrome でメニューのスタイルを設定しようとすると、いくつか問題が発生します。メニューは、ltr モードでは問題なく表示されますが、右から左へのモードでは Chrome で壊れます。

私はここにこれをいじっています: http://jsfiddle.net/YKger/

Firefox では、ltr のメニューは「one - two - three」、rtl のメニューは「three - two -one」です。It chrome は常に「one-two-three」としてレンダリングされます。

なぜこれが起こっているのか、または最初の「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 に答える