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

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

这就是所谓的侧边栏。 你可以在谷歌上搜索它。 有很多关于侧边栏的模板。

在这个例子中，我刚刚使用了带有inline-block值的display css 属性来进行预览。

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

 <div class="sidebar"> <div class="label">label A</div> <div class="label">label B</div> <div class="label">label C</div> </div> <div class="content"> <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>