html - CSS 选项卡设置中标签的不同样式

Question

希望这是一个非常简单的解决方案，我只是没有看到，但我一直在尝试所有我能找到的解决方案，这些解决方案在之前提交的问题中甚至接近这个问题，但我一无所获。

简而言之:我的 CSS 选项卡设置工作得很好，除了涉及到选项卡上实际标签的样式时。它适用于单一样式，但一旦我尝试引入辅助字体样式(将字体大小减小到 11 像素)，选项卡的右侧就会消失。

不幸的是，我需要能够在选项卡标签中显示这两种不同的字体大小/样式。我试过使用 span、div 等处理方法，但一切都会使选项卡的右边框消失。非常感谢任何帮助!

这是一个 fiddle :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

二级字体样式是指嵌套在 label 中的 div 吗？如果是 .tab-count 类，您可以设置 float:right。这将使它保持在同一行。

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