Question

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

缺点：我有一个很好的CSS标签设置工作，除了在标签上设置实际标签样式之外。它适用于单一样式，但是一旦我尝试引入辅助字体样式（将字体大小降低到11px），选项卡的右侧消失。

不幸的是，我需要能够在标签标签中显示这两种不同的字体大小/样式。我尝试过使用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);
}

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，这是一种块元素和内联元素的混合。

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

Answer 3

有些事情，首先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;
}

......并根据需要设计造型。

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

3 个答案: