Jquery ui jQuery UI选项卡对齐并共享标题栏

我想使用jQuery UI选项卡，但我需要正确对齐选项卡……这很“简单”，因为我可以修改选项卡容器类并扩展它

但问题是我想在左侧添加一个“标题”，如此屏幕截图所示：

我怎样才能做到干净呢

（一种肮脏的方式可能是在tabs标记前加上/附加一个div，动态添加DOM……我正在寻找一种更干净的方式：）

---

提前感谢您

首先，在运行中向dom添加元素没有什么不好的地方：-）

其次，您可以简单地在标记中添加一个元素，例如

（让我们从语义上讲（假设您之前有其他标题））：

这里有一个例子来说明

---

编辑：

正如您所指出的，向右浮动

会颠倒顺序

您可以反转标记本身中列表项的顺序，但这将打乱整个逻辑

下面是一段css，用于右对齐选项卡按钮，同时保持标记和视觉顺序：

/* align right the <ul> container */
.ui-tabs .ui-tabs-nav { height: 2.35em; text-align: right; }

/* jquery ui css floats-left the <li> so un-float them */
.ui-tabs .ui-tabs-nav li { display: inline-block; float: none; }

/*右对齐
容器*/
.ui选项卡.ui选项卡导航{高度：2.35em；文本对齐：右；}
/*jQueryUICSS在
左侧浮动，因此取消浮动它们*/
.ui tabs.ui tabs导航li{显示：内联块；浮点：无；}

---

我已经相应地更改了提琴。

我与一位开发人员进行了讨论，因为他告诉我颠倒选项卡的顺序是不对的，因为“语义”。在我们的例子中，我们在后台工作（它永远不会公开，因此不需要SEO）。。。如果选项卡作为一个大的HTML块被生成并发送到浏览器一次（没有ajax），您认为颠倒它们的顺序是如此重要吗？确实如此。使用

float:right

直观地反转选项卡的顺序。快速解决方案是反转标记中的

，但也会反转选项卡的

索引

：“Aenean lacinia”将成为第一个选项卡。您可以在初始化插件时设置活动选项卡，但这可能会导致一些混乱。我会想另一种方法来右对齐标签。我不能认为内容的“反转”是一个问题。。。您能告诉我，在哪些情况下（作为开发人员），您需要将选项卡的HTML块按选项卡标签的相同顺序排列吗？我的意思是，对于您的解决方案（在HTML源代码中），li将是tab3、tab2、tab1，也许tab内容div将是tab1、tab2、tab3。。。那又怎样（这是我的问题）。。。这真的重要吗？（同样，你不需要SEO功能，这是一个内部后台）。注意：我们正在使用一个Yii框架模块自动构建jqueryUI选项卡的HTML，因此在我们的例子中，li的顺序是颠倒的（对于float:right功能），但contents div的顺序是正常的。。。但是再一次那又怎样？：）谢谢你的编辑！！！但是我仍然在思考将源代码中的内容倒置的“问题”：P（只是为了我在办公室里进行的讨论：）

/* float tab buttons to right */
.ui-tabs .ui-tabs-nav li { float: right !important; }

/* position:relative on container will make the title position:absolute relative to the container */
#tabs { position: relative; }

/* absolute position the title */
.ui-tab-title { position: absolute; left: 20px; top: 15px; }

/* align right the <ul> container */
.ui-tabs .ui-tabs-nav { height: 2.35em; text-align: right; }

/* jquery ui css floats-left the <li> so un-float them */
.ui-tabs .ui-tabs-nav li { display: inline-block; float: none; }