Question

我在我的网站中添加了一个标签元素，然后遇到了有关margin设置的问题。

请运行以下代码段以查看示例。

$(document).ready(function() {
  $(".tabs-menu a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();
  });
});

.tabs-menu {
  padding-left: 3%;
  height: 30px;
  float: left;
  clear: both;
  color: #fff;
  margin-top: 1%;
}
.tabs-menu span {
  height: 25px;
  line-height: 30px;
  float: left;
  margin-right: 10px;
}
.tabs-menu span.current {
  position: relative;
  z-index: 5;
}
.tabs-menu span a {
  padding: 10px;
  text-transform: uppercase;
  text-decoration: none;
}
.tab {
  float: left;
  width: 100%;
  background-color: #cccccc;
}
.tab-content {
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-top: 5%;
  display: none;
}
#tab-1 {
  display: block;
  padding-top: .2%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="test-tab">
  <div class="tab-sum">
    <div class="tabs-menu">
      <span class="current"><a href="#tab-1">Tab1</a></span>
      <span><a href="#tab-2">Tab2</a></span>
    </div>
    <div class="tab">
      <div id="tab-1" class="tab-content">
        <span>
          <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
          </ul>
        </span>
      </div>
      <div id="tab-2" class="tab-content">
      </div>
    </div>
  </div>
</div>

<div class="beneath-tab">
  <span>
    This part should display beneath tab content
  </span>
</div>

我想在整个标签部分下方放置“此部分应显示在标签内容下方”的句子，其位置可以使用标签内容的height自动调整。

我想现在它不起作用的原因是因为tab设置为float。

有人可以帮忙吗？

Fiddle

Answer 1

您需要清除float，您可以通过向cf

添加一个tab-sum缩短的clearfix类来实现此目的。

$(document).ready(function() {
  $(".tabs-menu a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();
  });
});

.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}
.tabs-menu {
  padding-left: 3%;
  height: 30px;
  float: left;
  clear: both;
  color: #fff;
  margin-top: 1%;
}
.tabs-menu span {
  height: 25px;
  line-height: 30px;
  float: left;
  margin-right: 10px;
}
.tabs-menu span.current {
  position: relative;
  z-index: 5;
}
.tabs-menu span a {
  padding: 10px;
  text-transform: uppercase;
  text-decoration: none;
}
.tab {
  float: left;
  width: 100%;
  background-color: #cccccc;
}
.tab-content {
  width: 100%;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-top: 5%;
  display: none;
}
#tab-1 {
  display: block;
  padding-top: .2%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-tab">
  <div class="tab-sum cf">
    <div class="tabs-menu">
      <span class="current"><a href="#tab-1">Tab1</a></span>
      <span><a href="#tab-2">Tab2</a></span>
    </div>
    <div class="tab">
      <div id="tab-1" class="tab-content">
        <span>
          <ul>
            <li>test</li>
            <li>test</li>
            <li>test</li>
          </ul>
        </span>
      </div>
      <div id="tab-2" class="tab-content">
      </div>
    </div>
  </div>
</div>
<div class="beneath-tab">
  <span>
    This part should display beneath tab content
  </span>
</div>

无法将余量设置为制表符元素

1 个答案: