左菜单和右内容

Posted 2021-04-28

如何使此代码像附件图像一样？

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作为左侧的导航，text作为右侧的内容，像这样

enter image description here

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

希望得到您的帮助！谢谢

答案

我对您“无法包装标签”的含义感到困惑。您是说完全无法编辑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>

另一答案

称为sidebar。您可以在Google上搜索。关于边栏的模板很多。

在此示例中，我只使用display css属性和inline-block值进行预览。

.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>

以上是关于左菜单和右内容的主要内容，如果未能解决你的问题，请参考以下文章

阿里10年测试大佬带你搞懂测试左移和右移

错误：需要左值作为赋值的左操作数，我收到此错误啥是左值和右值以及如何删除此错误

左连接和右连接有啥区别

如果在一个表达式中同时使用左移和右移，为啥会有所不同？

ListView 行样式 - 左对齐文本和右对齐图标

官方示例中消息左对齐和右对齐的条件在哪里？