Question

我只使用CSS创建标签。它的工作方式是，有3个单选按钮，每个单选按钮都有一个标签。选项卡内容设置为display: none。选中标签后，该标签内容将变为display: block

由于labels（标签）之间存在空格，我在div元素周围添加了input/label并使用了Flexbox technique。

现在我在div周围添加了inputs/labels，标签内容从未显示，但它们永远不会成为display: block。

如何在选中标签时显示标签内容？

以下是相关代码：

.tab1:checked ~ .tab1,
.tab2:checked ~ .tab2,
.tab3:checked ~ .tab3 {
  display: block;
}

工作，但有空格
JSFiddle

＆＃13;

.tab {
  background-color: yellow;
  display: inline-block;
  width: calc(100% / 3);
  height: 50px;
  outline: 1px green solid;
}
.tabContent,
input {
  display: none;
}
.tab1:checked ~ .tab1,
.tab2:checked ~ .tab2,
.tab3:checked ~ .tab3 {
  display: block;
}

＆＃13;

<div id="overallDiv">
  <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" />
  <label for="rad1" class="tab">Fisrt Tab</label>

  <input type="radio" name="tabGroup1" id="rad2" class="tab2" />
  <label for="rad2" class="tab">Second Tab</label>

  <input type="radio" name="tabGroup1" id="rad3" class="tab3" />
  <label for="rad3" class="tab">Third Tab</label>

  <div class="tabContent tab1" id="first">
    First Tab
  </div>
  <div class="tabContent tab2" id="second">
    Second Tab
  </div>
  <div class="tabContent tab3" id="third">
    Third Tab
  </div>
</div>

＆＃13;

不工作，但现在是空格
JSFiddle

＆＃13;

.tab {
  background-color: yellow;
  display: inline-block;
  width: calc(100% / 3);
  height: 50px;
  outline: 1px green solid;
}
.tabContent,
input {
  display: none;
}
.tab1:checked ~ .tab1,
.tab2:checked ~ .tab2,
.tab3:checked ~ .tab3 {
  display: block;
}

＆＃13;

<div id="overallDiv">
  <div id="tabWrapper" style="display: flex;">
    <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" />
    <label for="rad1" class="tab">Fisrt Tab</label>

    <input type="radio" name="tabGroup1" id="rad2" class="tab2" />
    <label for="rad2" class="tab">Second Tab</label>

    <input type="radio" name="tabGroup1" id="rad3" class="tab3" />
    <label for="rad3" class="tab">Third Tab</label>
  </div>

  <div class="tabContent tab1" id="first">
    First Tab
  </div>
  <div class="tabContent tab2" id="second">
    Second Tab
  </div>
  <div class="tabContent tab3" id="third">
    Third Tab
  </div>
</div>

＆＃13;

Answer 1

由于内联元素具有空格边距，因此您的div变得略大于33％，因此不适合1行。

到你的工作，但有空格示例我~~添加了margin-right: -4px;~~ 重新订购了你的html一点来取出那个空间，但这可以是使用其他黑客，浮动和弯曲完成。（对于花车/弯曲，见下文）

在这种情况下的技巧是使内联元素停止并开始标记在同一行上，如下所示：</label><label

注意：这些边际空间问题在

之前已经解决

＆＃13;

.tab {
  background-color: yellow;
  display: inline-block;
  width: calc(100% / 3);
  height: 50px;
  outline: 1px green solid;
}
.tabContent,
input {
  display: none;
}
.tab1:checked ~ .tab1,
.tab2:checked ~ .tab2,
.tab3:checked ~ .tab3 {
  display: block;
}

＆＃13;

<div id="overallDiv">
  <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" />
  <input type="radio" name="tabGroup1" id="rad2" class="tab2" />
  <input type="radio" name="tabGroup1" id="rad3" class="tab3" />
  <label for="rad1" class="tab">First Tab
  </label><label for="rad2" class="tab">Second Tab
  </label><label for="rad3" class="tab">Third Tab
  </label>

  <div class="tabContent tab1" id="first">
    First Tab
  </div>
  <div class="tabContent tab2" id="second">
    Second Tab
  </div>
  <div class="tabContent tab3" id="third">
    Third Tab
  </div>
</div>

＆＃13;

根据要求提供flex版本。

＆＃13;

#overallDiv {
  display: flex;
  flex-wrap: wrap;
}
.tab {
  background-color: yellow;
  width: calc(100% / 3);
  height: 50px;
  outline: 1px green solid;
}
.tabContent,
input {
  display: none;
}
.tabContent {
  width: 100%;
}
.tab1:checked ~ .tab1,
.tab2:checked ~ .tab2,
.tab3:checked ~ .tab3 {
  display: block;
}

＆＃13;

<div id="overallDiv">
    <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" />
    <label for="rad1" class="tab">Fisrt Tab</label>

    <input type="radio" name="tabGroup1" id="rad2" class="tab2" />
    <label for="rad2" class="tab">Second Tab</label>

    <input type="radio" name="tabGroup1" id="rad3" class="tab3" />
    <label for="rad3" class="tab">Third Tab</label>

  <div class="tabContent tab1" id="first">
    First Tab
  </div>
  <div class="tabContent tab2" id="second">
    Second Tab
  </div>
  <div class="tabContent tab3" id="third">
    Third Tab
  </div>
</div>

＆＃13;

修改

这是＆＃34;花车＆＃34;版本

＆＃13;

#overallDiv {
  clear: left;
}
.tab {
  background-color: yellow;
  float: left;
  width: calc(100% / 3);
  height: 50px;
  outline: 1px green solid;
}
.tabContent,
input {
  display: none;
}
.tab1:checked ~ .tab1,
.tab2:checked ~ .tab2,
.tab3:checked ~ .tab3 {
  display: block;
}

＆＃13;

<div id="overallDiv">
  <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked" />
  <label for="rad1" class="tab">First Tab</label>
  
  <input type="radio" name="tabGroup1" id="rad2" class="tab2" />
  <label for="rad2" class="tab">Second Tab</label>
  
  <input type="radio" name="tabGroup1" id="rad3" class="tab3" />
  <label for="rad3" class="tab">Third Tab</label>

  <div class="tabContent tab1" id="first">
    First Tab
  </div>
  <div class="tabContent tab2" id="second">
    Second Tab
  </div>
  <div class="tabContent tab3" id="third">
    Third Tab
  </div>
</div>

＆＃13;

Answer 2

有几种方法可以删除空格。这是关于几种方法https://davidwalsh.name/remove-whitespace-inline-block的好文章。如果您不希望html变得混乱，可以向父元素添加font-size 0 ，如果子元素中有文本，则添加font-size给他们。你的CSS看起来像这样：

父元素：

#overallDiv {
    font-size: 0;
}

子元素：

.tabs {
    font-size: 14px;
}

这是jsfiddle。

标签内容未显示

2 个答案: