Css 如何在HTML5中自动调整选项卡宽度

我想根据

自动调整容器大小。如果容器内有4个

，则看起来不错，但如果只有1个

，则右侧将有足够的空间。所以想根据

调整容器大小。我怎样才能做到这一点？请帮帮我

主页看起来像这样

当有4个面板时，它非常适合这样

当有两个面板时，右侧有足够的空间，并用颜色标记。我想在这里自动调整容器宽度

名字
姓

尝试使用css flexbox删除不需要的空间

.nav{
显示器：flex；
}
a{
文字装饰：无；
颜色：白色；
}
李{
背景色：#232323；
列表样式类型：无；
填充：20px；
flex:1自动；
}
李：很活跃{
背景颜色：灰色；
}

您可以使用flexbox进行此行为。检查这个演示

HTML:

<div class="parent">
  <ul class="nav">
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
    <li>Item 1</li>
  </ul>
</div>

.parent {
  background-color: orange;
}

.parent ul.nav {
  list-style: none;
  padding: 0px;
  margin: auto;
  display: flex;
}

.parent ul.nav li {
  background-color: grey;
  padding: 10px 15px;
  border-right: 1px solid black;
  width: 100%;
  text-align: center;
}

.parent ul.nav li:last-child {
  border: 0px;
}

希望这会有帮助！

编辑1:

检查另一个演示

正文{
填充：0px；
保证金：0；
}
.家长{
背景颜色：橙色；
填充：20px；
}
.parent.tabFrame.itemContainer{
显示：内联块；
边缘底部：50px；
填充物：5px；
边框：1px实心；
溢出：隐藏；
}
.parent.tabFrame.myItem{
背景颜色：灰色；
显示：内联块；
宽度：100px；/*可以是任何固定宽度*/
填充：10px；
颜色：白色；
边框：1px纯黑；
}

标签区
项目1
项目2
项目3
项目4
标签区
项目1
项目2
项目3
标签区
项目1
项目2
标签区
项目1

这不是我想要的。我已经编辑了我的问题，并添加了一些图像文件，我认为这些文件可以让我清楚地知道我想要什么。在第一张图中，有4个面板，因此它完全适合容器。但如果你在第二张图中看到，只有两个面板，但右侧仍然有大量空间，这是我不想要的。它应根据“标准”部分中的面板自动调整。我希望我已经澄清了，这不是我想要的。我已经编辑了我的问题，并添加了一些图像文件，我认为这些文件可以让我清楚地知道我想要什么。在第一张图中，有4个面板，因此它完全适合容器。但如果你在第二张图中看到，只有两个面板，但右侧仍然有大量空间，这是我不想要的。它应根据“标准”部分中的面板自动调整。我希望我已经澄清了。看看我更新的答案，让我知道这是否是你想要的！对不起，塔萨。请阅读我的评论。我想根据容器内部的

自动调整容器大小。如果容器内有4个

，则看起来不错，但如果只有1个

，则右侧将有足够的空间。所以我想根据

调整容器大小。Yupp，这就是我所理解的，这就是我展示的代码笔中发生的事情。容器盒正在根据内部内容调整其宽度。如果div比父级宽，则会溢出。我不知道你到底在寻找什么。如果你能接受我的代码并做必要的工作，我将不胜感激。我期待着你的帮助。

.parent {
  background-color: orange;
}

.parent ul.nav {
  list-style: none;
  padding: 0px;
  margin: auto;
  display: flex;
}

.parent ul.nav li {
  background-color: grey;
  padding: 10px 15px;
  border-right: 1px solid black;
  width: 100%;
  text-align: center;
}

.parent ul.nav li:last-child {
  border: 0px;
}