不同風格的CSS標籤設置內的標籤

Question

希望這是一個非常簡單的解決方案，我只是沒有看到，但我一直在嘗試每一個解決方案，我可以找到拱弓甚至接近於此前提交的問題，我只是無處可去。

它的缺點：我有一個CSS標籤設置工作，這是偉大的，除了當涉及到樣式標籤上的實際標籤。它適用於單一樣式，但只要我嘗試引入輔助字體樣式（使字體大小降至11px），選項卡的右側消失。

不幸的是，我需要能夠在選項卡標籤中顯示這兩種不同的字體大小/樣式。我試過使用span，div等處理，但是一切都會使標籤的右邊框消失。任何幫助都非常感謝！

這裏有一個小提琴：http://jsfiddle.net/wKtPL/

這裏是我的樣本HTML：

<div class="tab"> 
     <input type="radio" id="tab-1" name="tab-group-1" checked> 
     <label for="tab-1">Library <div class='tab-count'> 123</div></label> 

    <div class="content"> 
      content goes here 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-2" name="tab-group-1"> 
     <label for="tab-2">Institution’s Subscriptions</label> 

     <div class="content"> 
      content goes here 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-3" name="tab-group-1"> 
     <label for="tab-3">Copyright Agent</label> 

     <div class="content"> 
      content goes here 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-4" name="tab-group-1"> 
     <label for="tab-4">Internet Archive</label> 

     <div class="content"> 
      content goes here 
     </div> 
    </div> 

    <div class="tab"> 
     <input type="radio" id="tab-5" name="tab-group-1"> 
     <label for="tab-5">HathiTrust</label> 

     <div class="content"> 
     content goes here 
     </div> 
    </div> 

和它背後的CSS：

.tabs { 
    position: relative; 
    min-height: 550px; 
    clear: both; 
    margin: 25px 0; 
} 
.tab { 
    float: left; 
} 
.tab label { 
    background: #dadcde; 
    color: #3f4b54; 
    padding: 10px; 
    border: 1px solid #ccc; 
    margin-left: -1px; 
    position: relative; 
    left: 1px; 
    -moz-border-radius-topright:3px; 
    -webkit-border-top-right-radius:3px; 
    border-top-right-radius:3px; 
    -moz-border-radius-topleft:3px; 
    -webkit-border-top-left-radius:3px; 
    border-top-left-radius:3px; 
    font-size: 14px; 
    font-weight:bold; 
    margin-right:5px; 
} 
.tab-count { 
font-size: 11px; 
} 
.tab [type=radio] { 
    display: none; 
} 
.content { 
    position: absolute; 
    top: 28px; 
    left: 0; 
    background: white; 
    right: 0; 
    bottom: 0; 
    padding: 20px; 
    border: 1px solid #ccc; 

    overflow: hidden; 
} 
.content > * { 
    opacity: 0; 

    -webkit-transform: translate3d(0, 0, 0); 

    -webkit-transform: translateX(-100%); 
    -moz-transform: translateX(-100%); 
    -ms-transform:  translateX(-100%); 
    -o-transform:  translateX(-100%); 

    -webkit-transition: all 0.6s ease; 
    -moz-transition: all 0.6s ease; 
    -ms-transition:  all 0.6s ease; 
    -o-transition:  all 0.6s ease; 
} 
[type=radio]:checked ~ label { 
    background: white; 
    border-bottom: 3px solid white; 
    z-index: 2; 
} 
[type=radio]:checked ~ label ~ .content { 
    z-index: 1; 
} 
[type=radio]:checked ~ label ~ .content > * { 
    opacity: 1; 

    -webkit-transform: translateX(0); 
    -moz-transform: translateX(0); 
    -ms-transform:  translateX(0); 
    -o-transform:  translateX(0); 
} 

Answer 1

通過二級字庫的風格你的意思是div嵌套在label？如果這是.tab-count，那麼你可以設置float:right。這將保持在同一行。

.tab-count { 
    font-size: 11px; 
    float:right; 
} 

Answer 2

這是通過一個塊元件的你的label元件，其是內嵌元素內的使用引起的。要解決此問題，請將您的<div class='tab-count'> 123</div>更改爲<span class='tab-count'> 123</span>。 Here是一個演示。

如果您想允許塊級元素放入內聯元素中，您可以像@setek說的那樣，使用替代inline-block這是塊元素和內聯元素的混合。

你不應該在內聯元素中使用塊元素，因爲這會導致像這樣的問題。發生了什麼事是因爲<div>佔用了一個額外的行，所以內嵌<label>標籤的樣式被拖動到兩行中。這也將左邊界拖到一條線上，這就是爲什麼你不再看到它（它在其他選項卡下面）。

Answer 3

有幾件事，首先123被隱藏在.content之下，所以你需要一個更高的top值。

其次，你的標籤，而被position: relative;仍然只是隱含地呈現爲display: inline;，所以它躲在123div的label本身下方。

http://jsfiddle.net/wKtPL/1/

.tab label { 
    [ ... ] 
    display: inline-block; 
    min-height: 2.5em; 
} 

.content { 
    [ ... ] 
    top: 60px; 
} 

...和渣土與造型，因爲你需要。