使用CSS來模擬選項卡式窗口

Question

我目前有兩個div，我試圖用來模擬下拉式選項卡式窗口。

我有灰色區域的內容。較大的div（包含大灰色區域或「窗口」的div）具有絕對位置，但小div（選項卡）也是如此。我無法弄清楚如何移動標籤，以便我可以添加更多標籤。當我添加更多標籤時，他們只是坐在中間的標籤上。我已經查看了Elements開發工具中的所有樣式，但沒有其他屬性可以左右移動標籤。我怎樣才能把它移動到左邊，比如200px？

Answer 1

如果您不瞭解您的情況並查看代碼，就很難爲您提供幫助。但我做了一些插圖試圖幫助你。

例一。

這就是我將如何做到沒有絕對位置。這樣，將保持內容區域向上頂，但從左至右爲你增添更多的權利將堆疊標籤，

HTML

<div id="content"> 

</div> 
<div id="tab1" class="tab"> 

</div> 
<div id="tab2" class="tab"> 

</div> 
<div id="tab3" class="tab"> 

</div> 

CSS

#content { 
    background-color: gray; 
    width: 100%; 
    height: 200px; 
} 

.tab { 
    width: 100px; 
    background-color: gray; 
    height: 50px; 
    display: inline-block; 
} 

輸出

這種方式是使用絕對位置，這裏是一個jsfiddle。

一旦一個元素具有絕對位置，它可以通過方向規則移動。它從左上角開始。現在要移動它，你可以添加一個數量的方向。

#myElement: { 
    position: absolute; 
    top: 20px; 
    right: 50px; 
    bottom: 20px; 
    left: 10px; 
} 

您可以玩這些值並觀察元素在窗口周圍移動。

相同的HTML作爲例子1

CSS

#content { 
    background-color: gray; 
    width: 100%; 
    height: 200px; 
} 

.tab { 
    width: 100px; 
    background-color: gray; 
    height: 50px; 
    display: inline-block; 
} 

#tab1 { 
    position: absolute; 
    left: 8px; 
} 

#tab2 { 
    position: absolute; 
    left: 300px; 
} 

#tab3 { 
    position: absolute; 
    left: 631px; 
} 

如果不幫你，請添加代碼，這樣我可以更好地瞭解您所要完成的任務。從你的問題來看，你聽起來像是在使用位置asbsolute時遇到問題，並且在內容下面的每個人中並排創建標籤。如果是的話，我提供了兩個例子。 1.使用位置absolute。 2.使用display: inline-block。