如何将外壳上选项卡设置为全宽

.container {
  width: 100%; /* 设置容器宽度为100% */
  display: flex; /* 使用弹性布局 */
  justify-content: space-between; /* 将选项卡均匀分布在容器内 */
}

<div class="container">
  <ul class="tabs">
    <li class="tab">选项卡1</li>
    <li class="tab">选项卡2</li>
    <li class="tab">选项卡3</li>
  </ul>
  <div class="tab-content">
    <!-- 选项卡1的内容 -->
    <div class="tab-pane">选项卡1的内容</div>
    <!-- 选项卡2的内容 -->
    <div class="tab-pane">选项卡2的内容</div>
    <!-- 选项卡3的内容 -->
    <div class="tab-pane">选项卡3的内容</div>
  </div>
</div>

.tabs {
  display: flex; /* 使用弹性布局 */
  list-style-type: none; /* 去除列表样式 */
  padding: 0;
  margin: 0;
}

.tab {
  flex: 1; /* 均分宽度 */
  text-align: center;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.tab:hover {
  background-color: #ddd;
}

.tab-content {
  flex: 1; /* 填充剩余宽度 */
  border: 1px solid #ccc;
  padding: 10px;
}