html - 使用CSS模拟选项卡式窗口

我目前有两个div，用于模拟下拉选项卡式窗口。

我对灰色区域的位置感到满意。较大的div（包含大的灰色区域或“窗口”的div）具有绝对位置，但较小的div（选项卡）也具有绝对位置。我不知道如何移动选项卡，以便可以添加更多选项卡。当我添加更多标签时，它们只是位于中间标签上方。我已经查看了Elements开发工具中的所有样式，但是没有其他属性可以“左右移动”选项卡。如何将其向左移动200像素？

最佳答案

在不了解您的情况和查看代码的情况下很难为您提供帮助。但是我做了一些插图来尝试帮助您。

例子一。

这就是我在没有绝对职位的情况下将如何做。这样一来，内容区域将保持在顶部，但是随着您添加的内容的增加，标签会从左到右堆叠，

html

<div id="content">

</div>
<div id="tab1" class="tab">

</div>
<div id="tab2" class="tab">

</div>
<div id="tab3" class="tab">

</div>

的CSS

#content {
  background-color: gray;
  width: 100%;
  height: 200px;
}

.tab {
  width: 100px;
  background-color: gray;
  height: 50px;
  display: inline-block;
}

输出量


这种方法使用绝对位置，这是jsfiddle。

元素一旦具有绝对位置，就可以使用方向规则进行移动。它从左上角开始。现在要移动它，您可以添加一个具有一定数量的方向。

#myElement: {
  position: absolute;
  top: 20px;
  right: 50px;
  bottom: 20px;
  left: 10px;
}

您可以使用这些值并观察元素在窗口中移动。

与示例1相同的html。

的CSS

#content {
  background-color: gray;
  width: 100%;
  height: 200px;
}

.tab {
  width: 100px;
  background-color: gray;
  height: 50px;
  display: inline-block;
}

#tab1 {
  position: absolute;
  left: 8px;
}

#tab2 {
  position: absolute;
  left: 300px;
}

#tab3 {
  position: absolute;
  left: 631px;
}

如果这样做没有帮助，请添加您的代码，以便我更好地了解您要完成的工作。从您的问题看来，您在使用绝对位置和在内容下方并排创建每个选项卡时遇到麻烦。如果是这样，我提供了两个示例。
1.使用位置absolute。
2.使用display: inline-block。

关于html - 使用CSS模拟选项卡式窗口，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40711068/