Question

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

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不能包含任何特定于任何给定选项卡的内容。

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

Answer 1

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

https://jqueryui.com/tabs/

这是最简单易行的方式。

我希望它有所帮助。

CSS标签不随内容增长

1 个答案: