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

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>

我想把所有的label标签显示为左边导航，右边显示内容

注意:不能换行标签，直接使用那个示例代码即可。

Answer 1

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

在这个例子中，我只是使用了带有 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>