Question

我目前正在使用仅使用CSS3制作的标签栏（我真的想避免使用任何javascript / jquery）。我找到了一个很好的教程，并根据我的需要修改了源代码。遗憾的是，我的标签栏下方的任何内容都将放置在“标签内容”-id的背景中，因为它们处于绝对模式。但我想要，例如页脚显示在我的标签栏内容下方，高度可变，不在其后面。我已经尝试更改定位参数，但结果“tab-content”将在单个tab1 / 2/3/4标签下流动。

这是我的样式表：

    .tabs input[type=radio] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
.tabs {
    width: 960px;
    float: none;
    list-style: none;
    position: relative;
    padding: 0;
    margin-top:30px;
    font-size:14px;
}
.tabs li {
    float: left;
}
.tabs label {
    display: block;
    padding: 10px 20px;
    cursor: pointer;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color: #aaa;
}
.tabs label:hover {
    top: 0;
    color: #000;
}
[id^=tab]:checked + label {
    color: #000;
}
[id^=tab]:checked ~ [id^=tab-content], [id^=tab]:checked ~ [id^=tab-content] > div {
    display: block;
}
.tab-content {
    z-index: 2;
    display: none;
    text-align: left;
    overflow: hidden;
    width: 100%;
    line-height: 140%;
    padding-top: 10px;
    padding: 15px;
    position: absolute;
    top: 53px;
    left: 0;
    box-sizing: border-box;
    font-size:14px;
    float:left;
}
.tab-content > div {
    display: none;
    -webkit-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
.TabBar {
    float:left;
    width: 960px;
    height:auto;
}

和我的 HTML 源代码：

<!-- TABBAR !-->
  <div class="TabBar">
    <ul class="tabs">
      <li>
        <input type="radio" checked name="tabs" id="tab1">
        <label for="tab1">First Tab</label>
        <div id="tab-content1" class="tab-content">
          <div class="animated  fadeInRight"> Lorem Ipsum 1 </div>
        </div>
      </li>
      <li>
        <input type="radio" name="tabs" id="tab2">
        <label for="tab2">Second Tab</label>
        <div id="tab-content2" class="tab-content">
          <div class="animated  fadeInRight"> Lorem Ipsum 2 </div>
        </div>
      </li>
      <li>
        <input type="radio" name="tabs" id="tab3">
        <label for="tab3">Third Tab</label>
        <div id="tab-content3" class="tab-content">
          <div class="animated  fadeInRight "> Lorem Ipsum 3 </div>
        </div>
      </li>
      <li>
        <input type="radio" name="tabs" id="tab4">
        <label for="tab4">Fourth Tab</label>
        <div id="tab-content4" class="tab-content">
          <div class="animated  fadeInRight "> Lorem Ipsum 4 </div>
        </div>
      </li>
    </ul>
  </div>

以下是我在CodePen上的问题示例：http://codepen.io/DanielCoding/pen/Fxrnw

我不知道如何处理这个问题。

提前谢谢！

Answer 1

如果我理解这个问题，你必须改变一些你的css。

.tab-content设置whitout位置propiretes（只有float：left;）并设置margin-top：35px;
.tabs标签设置位置：绝对和设置左侧标签，用于永久标签，如.tabs标签：nth-child（1）{left：0px} .tabs标签：nth-child（2）{left：100px}。 tabs标签：nth-child（3）{left：200px}

现在您可以在页面末尾添加div页脚。

我希望这有帮助。

Answer 2

我修改了你的CSS。现在工作正常。

.wrapper .TabBar {
  position: relative;
  height: 200px;
}
.wrapper .TabBar ul {
  padding: 0;
}
.wrapper .TabBar ul li {
  list-style: none;
  display: inline-block;
}
.wrapper .TabBar ul li input[type=radio] {
  position: relative;
  width: 100%;
  opacity: 0;
  top: 20px;
  cursor: pointer;
}
.wrapper .TabBar ul li input[type=radio]:checked ~ .tab-content {
  display: block;
}
.wrapper .TabBar ul li input[type=radio]:checked + label {
  background-color: #00c9ed;
}
.wrapper .TabBar ul li input[type=radio]:hover + label {
  background-color: #8eeeff;
}
.wrapper .TabBar ul li label {
  cursor: pointer;
  display: block;
  background-color: #eee;
  padding: 10px;
}
.wrapper .TabBar ul li label:hover {
  background-color: #8eeeff;
}
.wrapper .TabBar ul li .tab-content {
  position: absolute;
  left: 0;
  display: none;
}

您需要应用动画。

Answer 3

如果我理解了这个问题，那么你只需要添加一些css来强制标签容器环绕浮动元素并占据元素的高度。

添加

.tabs {
  overflow:hidden;
  ...

我希望这会有所帮助。

内容位于绝对定位的CSS3标签栏下方

3 个答案: