CSS选项卡设置中标签的不同样式答案

【问题标题】：different styles for labels inside CSS tab setupCSS选项卡设置中标签的不同样式
【发布时间】：2014-01-06 12:32:24
【问题描述】：

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

简而言之：我有一个很棒的 CSS 选项卡设置，除了为选项卡上的实际标签设置样式时。它适用于单一样式，但当我尝试引入辅助字体样式（将字体大小降低到 11 像素）时，选项卡的右侧消失了。

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

这是我的示例 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);
}

【问题讨论】：

所以库选项卡的右侧消失了？

标签： html css tabs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

有几件事，首先123 隐藏在.content 下，因此您需要更高的top 值。

其次，您的标签虽然是 position: relative;，但仍仅隐式呈现为 display: inline;，因此它会将 123 div 隐藏在 label 本身下方。

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

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

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

... 并根据需要添加样式。

【讨论】：

实际上——叹息——我受到了编程人员的反对。他们绝对 100% 必须使用 DIV 而不是跨度来实现计数功能；仍然可以修复还是我已经骨瘦如柴了？
嗯，我从未更改过您的 HTML，所以：是的，您可以继续使用 divs :)
谢谢！（抱歉，太累了，感冒了，我真的要提高理解力了）
没关系 :) 如果此答案解决了您的问题，您能否将其标记为已回答？所以它不是未答复队列的一部分。

【解决方案3】：

这是由于在 label 元素中使用了块元素，这是一个内联元素。要解决此问题，请将您的 <div class='tab-count'> 123</div> 更改为 <span class='tab-count'> 123</span>。 Here 是它的演示。

如果您想允许将块级元素放置在内联元素中，您可以像@setek 所说的那样使用替代inline-block，它是块元素和内联元素的一种混合。

你不应该在内联元素中使用块元素，因为这会导致像这样的问题。发生的事情是内联 <label> 标记的样式被拖过 2 行，因为 <div> 占用了额外的一行。这也将左边框向下拖了一条线，这就是为什么您不再看到它的原因（它位于其他选项卡下方）。

【讨论】：