Question

我正在尝试为我经常遇到的问题创建一个通用解决方案。

我正在尝试将checkbox hack与CSS网格一起使用，以创建一个选项卡式导航菜单，当HTML更改时，该菜单式导航菜单无需修改。如果您运行代码段，将会看到可以添加或删除任何输入/标签/节三重奏，而CSS可以处理它。

我无法完成的事情是让第二行覆盖所有列，从而有效地填充了可用空间。我了解到，除非定义了explicit grid.，否则我无法获得覆盖所有列的行。不幸的是，定义一定数量的列会破坏我试图做的全部目的。

在始终将HTML按输入/标签/节块的顺序的约束下工作，是否有任何方法可以使第二行跨越所有列而无需定义固定的列数？我尝试使用flexbox使它正常工作，但无法正确显示列。

我正在尝试仅使用CSS来获取此内容，而不使用javascript。

#Wrapper {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-rows: 2em calc(100% - 2em);
  height: 100%;
  width: 100%;
}

#Wrapper section,
input[name=buttons] {
  display: none
}

/*This doesn't work*/
#Wrapper section {
  grid-column-start: 1;
  grid-column-end: -1;
}

#Wrapper input[name=buttons]+label {
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  grid-row-start: 1;
  grid-row-end: 2;
}

#Wrapper>input[name=buttons]:checked+label {
  background-color: red;
}

#Wrapper>input[name=buttons]:checked+label+section {
  display: block;
  width: 100%;
}

<div id='Wrapper'>
  <input type='radio' id='TabButton1' name='buttons' checked></input>
  <label for='TabButton1'>SECTION 1</label>
  <section>
    This is some content 1
  </section>

  <input type='radio' id='TabButton2' name='buttons'></input>
  <label for='TabButton2'>SECTION 2</label>
  <section>
    This is some content 2
  </section>

  <input type='radio' id='TabButton3' name='buttons'></input>
  <label for='TabButton3'>SECTION 3</label>
  <section>
    This is some content 3
  </section>

  <input type='radio' id='TabButton4' name='buttons'></input>
  <label for='TabButton4'>SECTION 4</label>
  <section>
    This is some content 4
  </section>

  <input type='radio' id='TabButton5' name='buttons'></input>
  <label for='TabButton5'>SECTION 5</label>
  <section>
    This is some content 5
  </section>

</div>

如何仅使用CSS

0 个答案: