html - 纯 CSS 标签 : absolute positioning

Question

对于带有纯 CSS 的选项卡，我已经有了一个可行的解决方案。现在我的解决方案的缺点是，由于下面实际选项卡内容元素的绝对定位，需要使用 margin-CSS-rule 移动。

这会导致两个主要问题:

1) 如果每个选项卡中的内容量不同，那么如果选择了内容较少的选项卡，则该选项卡下方会出现“不必要的”空白。

2) 如果您将网站大小调整为较小的尺寸，元素可能会重叠。

我更喜欢没有任何 javascript 或 jQuery 的解决方案，但这不是强制性的。

我的意思的一个例子:看看我网站上的两个标签组: http://alexander-pastor.de

为了让这个例子的缺点更加明显:

1) 在标签标签中选择一个标签。

2) 将窗口调整到更小的尺寸并向下滚动。

这是标记和 css 规则:

编辑:不要介意它们来 self 的 CMS 的插入标签。

标记

<div id="blog-wrapper">

    <div id="blog-left">
        <div id="blog-news">
            {{insert_module::55}}
        </div>
    </div>

    <div id="blog-right">
        <ul class="tabs" style="margin-bottom:260px;">
            <li>
                <input type="radio" name="tabs" id="tab1">
                <label for="tab1">
                    <span class="fa fa-gear"></span> 
                    <span class="tab-text">Tools</span>
                </label>
                <div id="tab-content1" class="tab-content">
                    {{insert_article::blog-tools}}
                </div>
            </li>

            <li id="blog-authorization">
                <input type="radio" name="tabs" id="tab2" checked>
                <label for="tab2">
                    <span class="fa fa-user"></span> 
                    <span class="tab-text">Mein Account</span>
                </label>
                <div id="tab-content2" class="tab-content">
                    {{insert_article::blog-authorization}}
                </div>
            </li>
        </ul>

        <br style="clear:both">

        <ul class="tabs" style="margin-bottom:1000px;">
            <li>
                <input type="radio" name="tabs2" id="tab3" checked>
                <label for="tab3">
                    <span class="fa fa-tag"></span>
                    <span class="tab-text">Tags</span>
                </label>
                <div id="tab-content3" class="tab-content">
                    <p class="reset">
                        <a href="blog.html">gewählte Tags zurücksetzen</a>
                    </p>
                    {{insert_module::60}}
                    <!-- TAGCLOUD -->
                </div>
            </li>

            <li id="blog-archive">
                <input type="radio" name="tabs2" id="tab4">
                <label for="tab4">
                    <span class="fa fa-archive"></span>
                    <span class="tab-text">Archiv</span>
                </label>
                <div id="tab-content4" class="tab-content">
                    {{insert_module::58}}
                </div>
            </li>

            <li>
                <input type="radio" name="tabs2" id="tab5">
                <label for="tab5">
                    <span class="fa fa-star"></span>
                    <span class="tab-text">Empfohlen</span>
                </label>
                <div id="tab-content5" class="tab-content">
                    {{insert_article::blog-featured}}
                </div>
            </li>
        </ul>       
        <br style="clear:both">
    </div>  

</div>

CSS:

.tabs {
    display: block;
    list-style: none;
    position: relative;
    top:-10px;
    margin: 0 0 0 10px;
    padding-left:0;
    text-align: left;
}

.tabs li {
  display: inline-block;
}

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

.tabs label {
  display: block;
  padding: 14px 21px;
  border-radius: 5px 5px 0 0;
  margin: 0 5px 0 0;
  font-size: 16px;
  background: rgba(220, 240, 255, 0.3);
  cursor: pointer;
  position: relative;
  top: 6px;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.tabs label:hover {
  background: rgba(0, 126, 220, 0.3);
}

.tabs .tab-content {
  z-index: 2;
  display: none;
  overflow: hidden;
  width: 100%;
  font-size: 17px;
  line-height: 25px;
  padding: 25px; 
  position: absolute;
  top: 53px;
  left: 0;
  background: rgba(169, 218, 255, 0.3);
  border-radius:0 5px 5px 5px;
}

.tabs [id^="tab"]:checked + label {
  background: rgba(169, 218, 255, 0.3);
}

.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
  display: block;
}

Answer 1

虽然我更喜欢一些纯 CSS 解决方案，但这里是针对我的问题的 jQuery 解决方案:

jQuery dynamic margin for tabs