jQuery Vertical Tabs使標簽內容顯示為內聯塊

Question

我使用的是jQuery標簽，最近又切換到垂直標簽，但我發現內容沒有放在標簽后的“內部”。 它放置在容器div內，該容器div的邊距看起來好像在該內容框中。 這對於響應式設計而言效果不佳。

屏幕截圖示例：

橙色是邊距。

我通過在每個標簽上添加display: inline-block來弄清楚，我可以將內容包含在標簽后的空格中。 我想知道如何動態添加它，而不是在每個選項卡的div中放置內聯樣式。

這是標簽頁的HTML示例：

<div id="tabs-1" style="display: inline-block">
    <div id="placeholder" class="chart-resize"></div>
    <div id="placeholder2" class="chart-resize"></div>
</div>

<div id="tabs-2" style="display: inline-block">
    <div id="placeholder3" class="chart-resize"></div>
    <div id="placeholder4" class="chart-resize"></div>
</div>

這是垂直標簽的jQuery部分：

$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#tabs li").removeClass("ui-corner-top").addClass( "ui-corner-left" );

jQueryUI.css中的所有樣式均為默認樣式。

Answer 1

使用display: inline-block作為屬性定義類並將其添加到每個選項卡不起作用，因為您隨后將覆蓋非活動選項卡樣式，從而將非活動選項卡的內容設置為display: inline-block ，因此，每個標簽都一並顯示。

相反，我做了些擺弄，並在jQuery UI樣式表中找到了一個CSS類，您可以將display屬性從默認的display: block更改為display: inline-block 。 這允許將內容實際包含在選項卡中的“內部”，從而創建響應速度更快的設計。

這是課程：

.ui-tabs .ui-tabs-panel {
    display: inline-block;
    border-width: 0;
    padding: 1em 1.4em;
    background: 0 0
}