如何在左侧创建导航栏，在右侧创建容器？

Question

我想制作一个这样的模板：

这是HTML：

<div class="wrapper">
  <div class="label">label A</div>
  <div class="text">text A text A text A</div>

  <div class="label">label B</div>
  <div class="text">text B text B text B</div>

  <div class="label">label C</div>
  <div class="text">text C text C text C</div>
</div>

我想在左侧导航中显示所有标签，而内容在右侧

注意：不能包装标签，只能使用该示例代码。

Answer 1

我对“无法包装标签”的含义感到困惑。您是说完全无法编辑HTML吗？设置方式将很难获得所需的效果。

我要做的是在相同的层次结构上有2个包装，一个包含标签菜单，另一个包含子菜单。

<div class="wrapper">
  <div class="label">label A</div>
  <div class="label">label B</div>
  <div class="label">label C</div>
</div>
<div class="wrapper-2">
  <div class="text">text A text A text A</div>
  <div class="text">text B text B text B</div>
  <div class="text">text C text C text C</div>
</div>

Answer 2

这就是 sidebar 。您可以在Google上搜索。有关侧边栏的模板很多。

在此示例中，我仅使用display的{​​{1}} css属性进行预览。

inline-block

.sidebar, .content {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 12px;
}

.sidebar {
  margin-right: 20px;
}