標簽內容未顯示

Question

我僅使用CSS創建標簽。 它的工作方式是有3個單選按鈕，並且每個單選按鈕都有一個標簽。 標簽內容設置為display: none 。 選擇選項卡后，該選項卡內容將display: block

由於labels空格隔開，因此我在input/label元素周圍添加了一個div ，並使用了Flexbox技術 。

現在，我在inputs/labels周圍添加了div ，選項卡的內容不再顯示，它們也不再display: block 。

選擇標簽后，如何顯示標簽內容？

以下是相關代碼：

.tab1:checked ~ .tab1,
.tab2:checked ~ .tab2,
.tab3:checked ~ .tab3 {
  display: block;
}

工作正常，但空白
的jsfiddle

 .tab { background-color: yellow; display: inline-block; width: calc(100% / 3); height: 50px; outline: 1px green solid; } .tabContent, input { display: none; } .tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 { display: block; } 

 <div id="overallDiv"> <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" /> <label for="rad1" class="tab">Fisrt Tab</label> <input type="radio" name="tabGroup1" id="rad2" class="tab2" /> <label for="rad2" class="tab">Second Tab</label> <input type="radio" name="tabGroup1" id="rad3" class="tab3" /> <label for="rad3" class="tab">Third Tab</label> <div class="tabContent tab1" id="first"> First Tab </div> <div class="tabContent tab2" id="second"> Second Tab </div> <div class="tabContent tab3" id="third"> Third Tab </div> </div> 

不起作用，但是現在空格
的jsfiddle

 .tab { background-color: yellow; display: inline-block; width: calc(100% / 3); height: 50px; outline: 1px green solid; } .tabContent, input { display: none; } .tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 { display: block; } 

 <div id="overallDiv"> <div id="tabWrapper" style="display: flex;"> <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" /> <label for="rad1" class="tab">Fisrt Tab</label> <input type="radio" name="tabGroup1" id="rad2" class="tab2" /> <label for="rad2" class="tab">Second Tab</label> <input type="radio" name="tabGroup1" id="rad3" class="tab3" /> <label for="rad3" class="tab">Third Tab</label> </div> <div class="tabContent tab1" id="first"> First Tab </div> <div class="tabContent tab2" id="second"> Second Tab </div> <div class="tabContent tab3" id="third"> Third Tab </div> </div> 

Answer 1

由於內聯元素具有空格，因此您的div會變得略大於33％，因此不適合1行。

對於您的工作，但使用空白示例，我 添加了 margin-right: -4px; 重新整理了html的空間，以騰出空間，但這可以使用其他技巧，浮動元素和flex來完成。 （關於浮動/彎曲，請參見下文）

在這種情況下，技巧是使內聯元素的stop和start標簽位於同一行，如下所示： </label><label

注意：這些邊距空間問題之前已經解決

• 如何刪除內聯塊元素之間的空間？
• 為什么這些內聯塊div元素之間存在無法解釋的差距？

 .tab { background-color: yellow; display: inline-block; width: calc(100% / 3); height: 50px; outline: 1px green solid; } .tabContent, input { display: none; } .tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 { display: block; } 

 <div id="overallDiv"> <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" /> <input type="radio" name="tabGroup1" id="rad2" class="tab2" /> <input type="radio" name="tabGroup1" id="rad3" class="tab3" /> <label for="rad1" class="tab">First Tab </label><label for="rad2" class="tab">Second Tab </label><label for="rad3" class="tab">Third Tab </label> <div class="tabContent tab1" id="first"> First Tab </div> <div class="tabContent tab2" id="second"> Second Tab </div> <div class="tabContent tab3" id="third"> Third Tab </div> </div> 

根據要求提供Flex版本。

 #overallDiv { display: flex; flex-wrap: wrap; } .tab { background-color: yellow; width: calc(100% / 3); height: 50px; outline: 1px green solid; } .tabContent, input { display: none; } .tabContent { width: 100%; } .tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 { display: block; } 

 <div id="overallDiv"> <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" /> <label for="rad1" class="tab">Fisrt Tab</label> <input type="radio" name="tabGroup1" id="rad2" class="tab2" /> <label for="rad2" class="tab">Second Tab</label> <input type="radio" name="tabGroup1" id="rad3" class="tab3" /> <label for="rad3" class="tab">Third Tab</label> <div class="tabContent tab1" id="first"> First Tab </div> <div class="tabContent tab2" id="second"> Second Tab </div> <div class="tabContent tab3" id="third"> Third Tab </div> </div> 

編輯

這是“浮動”版本

 #overallDiv { clear: left; } .tab { background-color: yellow; float: left; width: calc(100% / 3); height: 50px; outline: 1px green solid; } .tabContent, input { display: none; } .tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 { display: block; } 

 <div id="overallDiv"> <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" /> <label for="rad1" class="tab">First Tab</label> <input type="radio" name="tabGroup1" id="rad2" class="tab2" /> <label for="rad2" class="tab">Second Tab</label> <input type="radio" name="tabGroup1" id="rad3" class="tab3" /> <label for="rad3" class="tab">Third Tab</label> <div class="tabContent tab1" id="first"> First Tab </div> <div class="tabContent tab2" id="second"> Second Tab </div> <div class="tabContent tab3" id="third"> Third Tab </div> </div> 

Answer 2

有兩種刪除空白的方法。 這是一篇有關幾種方法的好文章https://davidwalsh.name/remove-whitespace-inline-block 。 如果您不希望html變得混亂，則可以向父元素添加font-size為0 ，然后，如果子元素中包含文本，則為它們添加font-size 。 您的CSS如下所示：

父元素：

#overallDiv {
    font-size: 0;
}

子元素：

.tabs {
    font-size: 14px;
}

這是一個jsfiddle 。