Css 如何将jquery UI垂直选项卡更改为右浮动和方向rtl

以下是我目前拥有的：

我想让它的方向rtl，所有的ul的权利，就像现在只是方向rtl网站一样，在谷歌或这里找不到，如何使它

提前谢谢

代码

Javascript:

html:

EDITKheema：

Irvin的最新版本：

---

这是我的最新解决方案，几乎完全符合我的需要。

根据您添加的代码，我只能为您提供此解决方案：

您需要修改css，如下所示：

.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .2em .2em 0em; float: right; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; direction:rtl;}
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-left-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em;margin-right:13em; direction:rtl;}
.ui-tabs .ui-tabs-nav li a { float:none;}

---

根据您添加的代码，我只能为您提供以下解决方案：

您需要修改css，如下所示：

.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .2em .2em 0em; float: right; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; direction:rtl;}
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-left-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em;margin-right:13em; direction:rtl;}
.ui-tabs .ui-tabs-nav li a { float:none;}

---

您可以按以下方式修改css：

.tabs-right .ui-tabs-nav { 
    position: absolute; 
    right: 0.25em; 
    top: 0.25em; 
    bottom: 0.25em; 
    width: 10em; 
    padding: 0.2em 0.2em 0.2em 0em; 
} 
.tabs-right .ui-tabs-nav li { 
    width: 100%; 
    border-left: none; 
    border-bottom-width: 1px !important; 
    -moz-border-radius: 0px 4px 4px 0px; 
    -webkit-border-radius: 0px 4px 4px 0px; 
    border-radius: 0px 4px 4px 0px; 
    overflow: hidden; 
} 
.tabs-right .ui-tabs-nav li.ui-tabs-selected, 
.tabs-right .ui-tabs-nav li.ui-state-active { 
    left: -1px; 
    border-left: 1px solid transparent; 
} 
.tabs-right .ui-tabs-nav li a { 
    width: 100%; 
} 

.tabs-right .ui-tabs-panel {
     padding: 1em;
     margin-right:11em;
     direction:rtl;
}

---

演示：

您可以修改css，如下所示：

.tabs-right .ui-tabs-nav { 
    position: absolute; 
    right: 0.25em; 
    top: 0.25em; 
    bottom: 0.25em; 
    width: 10em; 
    padding: 0.2em 0.2em 0.2em 0em; 
} 
.tabs-right .ui-tabs-nav li { 
    width: 100%; 
    border-left: none; 
    border-bottom-width: 1px !important; 
    -moz-border-radius: 0px 4px 4px 0px; 
    -webkit-border-radius: 0px 4px 4px 0px; 
    border-radius: 0px 4px 4px 0px; 
    overflow: hidden; 
} 
.tabs-right .ui-tabs-nav li.ui-tabs-selected, 
.tabs-right .ui-tabs-nav li.ui-state-active { 
    left: -1px; 
    border-left: 1px solid transparent; 
} 
.tabs-right .ui-tabs-nav li a { 
    width: 100%; 
} 

.tabs-right .ui-tabs-panel {
     padding: 1em;
     margin-right:11em;
     direction:rtl;
}

---

演示：

非常简单。创建另一个****css文件****并导入此代码

.ui-tabs { direction: rtl; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected,
.ui-tabs .ui-tabs-nav li.ui-state-default {float: right; }
.ui-tabs .ui-tabs-nav li a { float: right; }




Now your Tab right to left

---

这很容易。创建另一个****css文件****并导入此代码

.ui-tabs { direction: rtl; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected,
.ui-tabs .ui-tabs-nav li.ui-state-default {float: right; }
.ui-tabs .ui-tabs-nav li a { float: right; }




Now your Tab right to left

---

您应该提供一些原始代码以获得更好的答案。如果你不提供任何代码，版主可以标记你的问题。你可以给float:right to然后改变方向使用direction:rtl，这样就好像@Era是完全正确的，你应该给一些信息值，否则没有人能给你准确的答案。请耐心和我们合作。Kheema，我已经尝试过了，但看看会发生什么，我会用图片编辑我的代码。我也尝试过玩LI，但它不会生效。你应该提供一些原始代码以获得更好的答案。如果你不提供任何代码，版主可以标记你的问题。你可以给float:right to然后改变方向使用direction:rtl，这样就好像@Era是完全正确的，你应该给一些信息值，否则没有人能给你准确的答案。请耐心与我们合作。Kheema，我已经试过了，但看看会发生什么，我会用图片编辑我的代码。我也试过玩LI，但它不会生效。谢谢，我也这么做了，但它与原始图像不一样。看我上次编辑，我添加的最后一张图片，与你的解决方案相同谢谢，我也这么做了，但是它和原始图片不一样。看我上次编辑的，我添加的最后一张图片，和你的解决方案一样哇，漂亮的近乎完美只是需要一些修改，看看我的最新图片有什么建议吗？哇，漂亮的近乎完美只是需要一些修改，看看我的最新图片有什么建议吗？