不稳定的标签在绝对定位方面表现不佳

时间：2015-04-19 06:11:36

标签： html css

我试图创建一个可嵌套的标签，但我遇到了这个大问题。

标签容器有position:absolute，直到我在内容中添加新的标签集时才可以。

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

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

结果应该看起来像ff图像：

enter image description here

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

在Google中发现了很多类似的问题，但它似乎并没有解决我的问题。也许您可以建议更好，更新的解决方案FIDDLE HERE.

2 个答案:

答案 0 :(得分：2)

就是这样！我没有使用位置绝对但是将a浮动到左边，将内容容器浮动到右边然后添加边距。我根本没有改变标记。

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>

答案 1 :(得分：-1)

我认为这会让你开心。 

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 {
  position:relative;
  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;
  position:relative;
}
ul.tabs > li.active > a {
  color: #f00;
}
ul.tabs > li.active > a,
ul.tabs > div {
  background-color: #fff;
}

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

ul.tabs > div.active {
    position:relative;
    width:96%;
    display: table;

}
<ul class="tabs">
        <li class="active">
            <a href="#">tab 1</a> 
        </li>
        <li>
            <a href="#">tab 2</a>
        </li>
        <li>
            <a href="#">tab 3</a>
        </li>
          
        <div class="active">
              <ul class="tabs">
                <li class="active">
                    <a href="#">tab 1.1</a> 
                </li>
                <li>
                    <a href="#">tab 2.1</a>
                </li>
                <li>
                    <a href="#">tab 3.1</a>
                </li>
                  
                <div class="active">
                    content1.1
                </div>
                <div>
                    content2.1
                </div>
                <div>
                    content3.1
                </div>
              </ul>
        </div>
        <div>
            content2
        </div>
        <div>
            content3
        </div>
      </ul>

相关问题
最新问题