标签不会在没有 javascript 的情况下将容器包装在解决方案上

debugcn 发表于 Dev

伯纳德 A.

我正在尝试使用jquery-ui.

我发现这个 codepen工作正常，除了当有很多标签时不环绕容器的问题（参见这个 codepen）。

当然可以用 javascript 解决这个问题，但我现在正试图避免它。

谢谢

* {
  margin: 0;
  padding: 0;
}

h1,
h3 {
  text-transform: uppercase;
  font-weight: normal;
}

.tabs {
  width: 600px;
  display: flex;
  margin: 40px auto;
  position: relative;
  flex-wrap: wrap;
}

.tabs .tab {
  display: block;
}

.tabs .tab>input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.tabs .tab>label {
  display: block;
  padding: 6px 80px;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  color: #FFF;
  background: #4A83FD;
}

.tabs .content {
  z-index: 0;
  /* or display: none; */
  overflow: hidden;
  width: 600px;
  padding: 25px;
  position: absolute;
  top: 27px;
  left: 0;
  background: #303030;
  color: #DFDFDF;
  opacity: 0;
  transition: opacity 400ms ease-out;
}

.tabs>.tab>[id^="tab"]:checked+label {
  top: 0;
  background: #303030;
  color: #F5F5F5;
}

.tabs>.tab>[id^="tab"]:checked~[id^="tab-content"] {
  z-index: 1;
  /* or display: block; */
  opacity: 1;
  transition: opacity 400ms ease-out;
}

<ul class="tabs">
  <li class="tab">
    <input type="radio" name="tabs" checked="checked" id="tab1" />
    <label for="tab1">One</label>
    <div id="tab-content1" class="content">
      <h1>Tab content 1</h1>
      <hr/>
      <h3>Aliquam tristique orci non facilisis lobortis</h3>
      <br/>
      <img src="https://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png" width="100" style="float: left; margin-right: 10px;" />
      <p>Interdum et malesuada </p>
    </div>
  </li>

  <li class="tab">
    <input type="radio" name="tabs" id="tab2" />
    <label for="tab2">Two</label>
    <div id="tab-content2" class="content">
      <h1>Tab content 2</h1>
      <hr/>
      <h3>Ut bibendum augue vel magna rhoncus</h3>
      <br/>
      <p>Nam cursus, massa ac imperdiet posuer.</p>
    </div>
  </li>

  <li class="tab">
    <input type="radio" name="tabs" id="tab3" />
    <label for="tab3">Three</label>
    <div id="tab-content3" class="content">
      <h1>Tab content 3</h1>
      <hr/>
      <h3>Praesent ac accumsan urna. Mauris lorem purus</h3>
      <br/>
      <p>Suspendisse vulputate nunc ac pretium pulvinar</p>
    </div>
  </li>

  <li class="tab">
    <input type="radio" name="tabs" id="tab4" />
    <label for="tab4">Four</label>
    <div id="tab-content4" class="content">
      <h1>Tab content 4</h1>
      <hr/>
      <h3>Class aptent taciti sociosqu ad litora torquen</h3>
      <br/>
      <p>Fusce in malesuada ligula. Donec eleifend dui eu mi condimentum interdum. </p>
    </div>
  </li>

</ul>

布万

按我的理解，我认为你必须改变top: 27px，以top: 100%在.tabs .content类。

小提琴链接：https : //codepen.io/bhuwanb9/pen/RxLvPP

检查下面的片段

body {
  font: 13px Verdana;
}

* {
  margin: 0;
  padding: 0;
}

h1,
h3 {
  text-transform: uppercase;
  font-weight: normal;
}

.tabs {
  width: 600px;
  display: flex;
  margin: 40px auto;
  position: relative;
  flex-wrap: wrap;
  list-style-type: none;
}

.tabs .tab {border:1px solid #fff;}

.tabs .tab>input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.tabs .tab>label {
  display: block;
  padding: 6px 30px;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  color: #FFF;
  background: #4A83FD;
}

.tabs .content {
  z-index: 0;
  width: 600px;
  padding: 25px;
  position: absolute;
  top: 100%;
  left: 0;
  background: #303030;
  color: #DFDFDF;
  opacity: 0;
  transition: opacity 400ms ease-out;
}

.tabs>.tab>[id^="tab"]:checked+label {
  top: 0;
  background: #303030;
  color: #F5F5F5;
}

.tabs>.tab>[id^="tab"]:checked~[id^="tab-content"] {
  z-index: 1;
  /* or display: block; */
  opacity: 1;
  transition: opacity 400ms ease-out;
}

<ul class="tabs">
  <li class="tab">
    <input type="radio" name="tabs" checked="checked" id="tab1" />
    <label for="tab1">One</label>
    <div id="tab-content1" class="content">
      One
    </div>
  </li>
  <li class="tab">
    <input type="radio" name="tabs" id="tab2" />
    <label for="tab2">Two</label>
    <div id="tab-content2" class="content">
      Two
    </div>
  </li>
  <li class="tab">
    <input type="radio" name="tabs" id="tab3" />
    <label for="tab3">Three</label>
    <div id="tab-content3" class="content">
      Three
    </div>
  </li>
  <li class="tab">
    <input type="radio" name="tabs" id="tab4" />
    <label for="tab4">Four</label>
    <div id="tab-content4" class="content">
      Four
    </div>
  </li>
  <li class="tab">
    <input type="radio" name="tabs" id="tab5" />
    <label for="tab5">Five</label>
    <div id="tab-content5" class="content">
      Five
    </div>
  </li>
  <li class="tab">
    <input type="radio" name="tabs" id="tab6" />
    <label for="tab6">Six</label>
    <div id="tab-content6" class="content">
      Six
    </div>
  </li>
  <li class="tab">
    <input type="radio" name="tabs" id="tab7" />
    <label for="tab7">Seven</label>
    <div id="tab-content7" class="content">
      Seven
    </div>
  </li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。