CSS标签不随内容增长

时间:2015-05-13 15:49:10

标签: html css tabs

我正在开发一个我正在开发的网络应用程序的问题,它有几个标签用于各种内容。问题是,标签不会增长以包装整个内容。

CSS代码在这里:

.w3c {
height: auto;
min-height: 250px;
position: relative;
width: 100%;
}
    .w3c > div {
        display: inline;
    }
    .w3c > div > a {
        margin-left: -1px;
        position: relative;
        left: 1px;
        text-decoration: none;
        color: black;
        background: white;
        display: block;
        float: left;
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-bottom: 1px solid white;
    }
    .w3c > div:not(:target) > a {
        border-bottom: 0;
        background: -moz-linear-gradient(top, white, #eee);
    }
    .w3c > div:target > a {
        background: white;
    }
    .w3c > div > div {
        background: white;
        z-index: -2;
        left: 0;
        top: 30px;
        bottom: 0;
        right: 0;
        padding: 20px;
        border: 1px solid #ccc;
    }                      
    .w3c > div:not(:target) > div {
        position: absolute;
    }
    .w3c > div:target > div {
        position: absolute;
        z-index: -1;
    }

我在这里建立了一个模型:http://jsfiddle.net/diehlada/tx81he5s/

实际页面的页面(包括选项卡和相关内容)是使用Catalyst和Template Toolkit动态生成的。我需要能够根据需要生成任意选项卡的灵活性,因此选项卡的CSS不能包含任何特定于任何给定选项卡的内容。

我玩过位置:亲戚;和浮动:...;这些不可避免地打破了标签布局。此外,如果我只是删除包装内容的内部,布局也会中断(尽管选项卡确实增长到内部的内容)。我快速耗尽了想法,非常感谢一些建议!谢谢!

1 个答案:

答案 0 :(得分:0)

我认为您可能需要更改创建标签的方式。 我建议你应该使用jquery选项卡。

https://jqueryui.com/tabs/

这是最简单易行的方式。

我希望它有所帮助。