html - 可嵌套标签在绝对定位下表现不佳

Question

我正在尝试创建一个可嵌套的选项卡，但我遇到了这个大问题。

选项卡容器有 position:absolute 并且直到我在内容中添加新的选项卡组时才可以。

问题是嵌套的 div 在父 div 中溢出。

如何在不添加标记或更改标记或添加固定高度的情况下解决此问题？

结果应该类似于 ff 图片:

body {
  margin: 30px auto;
  width: 90%;
  font: normal normal 100% 'Arial',Verdana,sans-serif;
  color: #444;
  background:#eee
}

.tabs * {
  border-width: 0;
  border-style: solid;
  border-color:#ccc
}
ul.tabs {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: justify;
}
ul.tabs > li {
  float:left;
  list-style: none;
}
ul.tabs > li > a {
  margin-right:4px;
  padding: 10px 15px;
  display: block;
  line-height: 25px;
  color: #999;
  border-width: 1px 1px 0 1px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  background-color:#ddd;
}
ul.tabs > li.active > a {
  color: #f00;
}
ul.tabs > li.active > a,
ul.tabs > li > div {
  background-color: #fff;
}

ul.tabs > li > div {
  display: none;
  width:100%;
  position:absolute;
  padding: 10px;
  border-width:1px;
  left:0;
}
ul.tabs > li.active > div {
  display: block;
}

<ul class="tabs">
    <li class="active"><a href="#">tab 1</a>
      <div>
        <!--content with nested tabs starts-->
        <ul class="tabs">
          <li class="active"><a href="#">tab 1.1</a>
            <div>
              content1
            </div>
          </li>
          <li><a href="#">tab 1.2</a>
            <div>
              content2
            </div>
          </li>
          <li><a href="#">tab 1.3</a>
            <div>
              content3
            </div>
          </li>
        </ul>
        <!--content with nested tabs ends-->
      </div>
    </li>
    <li><a href="#">tab 2</a>
      <div>
        content2
      </div>
    </li>
    <li><a href="#">tab 3</a>
      <div>
        content3
      </div>
    </li>
  </ul>

在谷歌中发现了很多关于此的类似查询，但它似乎并没有解决我的问题。也许您可以提出更好的更新解决方案 FIDDLE HERE.

Answer 1

就是这样!我没有使用绝对位置，而是将 a float 到左侧，将内容容器 float 到右侧，然后添加边距。我根本没有更改标记。

body {
  margin: 30px auto;
  width: 90%;
  font: normal normal 100% 'Arial',Verdana,sans-serif;
  color: #444;
  background:#eee
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
}
.tabs * {
  border-width: 0;
  border-style: solid;
  border-color:#ccc
}
ul.tabs {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: justify;
}
ul.tabs > li {
  list-style: none;
}
ul.tabs > li > a {
  float: left;
  margin-right:4px;
  padding: 10px 15px;
  color: #999;
  border-width: 1px 1px 0 1px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  background-color:#ddd;
}
ul.tabs > li.active > a {
  color: #f00;
}
ul.tabs > li.active > a,
ul.tabs > li > div {
  background-color: #fff;
}
ul.tabs > li > div {
  float: right;
  width: 100%;
  margin: 37px 0 0 -100%;
  padding: 10px;
  border-width:1px;
  display:none
}
ul.tabs > li.active > div {
  display:block
}

  <ul class="tabs">
    <li class="active"><a href="#">tab 1</a>
      <div>
        <!--content with nested tabs starts-->
        <ul class="tabs">
          <li class="active"><a href="#">tab 1.1</a>
            <div>
              content1
            </div>
          </li>
          <li><a href="#">tab 1.2</a>
            <div>
              content2
            </div>
          </li>
          <li><a href="#">tab 1.3</a>
            <div>
              content3
            </div>
          </li>
        </ul>
        <!--content with nested tabs ends-->
      </div>
    </li>
    <li><a href="#">tab 2</a>
      <div>
        content2
      </div>
    </li>
    <li><a href="#">tab 3</a>
      <div>
        content3
      </div>
    </li>
  </ul>