如何在旋转时将跨度或div对齐到中间？

Question

我试图匹配基于HTML和CSS的嵌套手风琴布局，以匹配模拟，看起来如下所示：

我的实现布局如下所示：

对齐问题是为了在设计中对齐旋转文本和宽度问题的中心。

 body{ background: seagreen; font-size: 16px; font-family: Arial; color: #333; border-color: none; } div.container{ margin: 0 auto; padding: 10px; background: #ccc; border: solid 1px; width: 50%; } li { list-style-type: none; padding: 5px; background: #ddd; border: solid 1px; } li.has-children.and{ background: #4059AA; } li.has-children.or { background: #BE60A6; } li.has-children ul { margin-top: -3%; } li span{ display: inline-block; font-weight: bold; /* Safari */ -webkit-transform: rotate(-90deg); vertical-align: baseline; /* Firefox */ -moz-transform: rotate(-90deg); /* IE */ -ms-transform: rotate(-90deg); /* Opera */ -o-transform: rotate(-90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /*-webkit-transform: skewY(3deg); -moz-transform: skewY(3deg);*/ -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; } 

 <div class="container"> <ul class="tabs"> <li class="has-children and"> <span>AND</span> <ul> <li>Sachin</li> <li>Sourav</li> <li>Dravid</li> <li class="has-children or"> <span>OR</span> <ul> <li>Bravo</li> <li>Gayle</li> <li>Sarwan</li> <li class="has-children and"> <span>AND</span> <ul> <li>Hansie</li> <li>Rhodes</li> <li>Pollock</li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> 

Answer 1

我的尝试：

Codepen演示

一些规格：

• 所有逻辑运算符都是列表的data-属性，并写为列表的伪元素before的内容
• 垂直方向通过writing-mode: vertical-lr; 属性
• 颜色是用CSS变量内联定义的，但当然你可以使用类来代替
• 里面的数据放在flexbox列中，您可以控制数据和标题的垂直对齐方式

最终的结果非常敏感

标记

<div class="data">
  <ul data-logical-operator="AND" style="--bg:blue">
    <li> <!-- 1st level -->
      <dl>
        <dt><span>Attribute</span></dt>
        <dd><span>LLDP System Description</span></dd>
        <dt><span>Operator</span></dt>
        <dd><span>Equal</span></dd>
        <dt><span>Value</span></dt>
        <dd><span>RegDN 6388 MINET_6920</span></dd>
      </dl>

      <ul data-logical-operator="OR" style="--bg:violet"> <!-- 2nd level -->
        <li>
          <dl>
            <dt><span>Attribute</span></dt>
            <dd><span>LLDP System Description</span></dd>
            <dt><span>Operator</span></dt>
            <dd><span>Equal</span></dd>
            <dt><span>Value</span></dt>
            <dd><span>RegDN 6388 MINET_6920</span></dd>
          </dl>      
          <dl>
            <dt><span>Attribute</span></dt>
            <dd><span>LLDP System Description</span></dd>
            <dt><span>Operator</span></dt>
            <dd><span>Equal</span></dd>
            <dt><span>Value</span></dt>
            <dd><span>RegDN 6388 MINET_6920</span></dd>
          </dl>

          <ul data-logical-operator="AND" style="--bg:blue">  <!-- 3rd level -->
            <li>
              <dl>
                <dt><span>Attribute</span></dt>
                <dd><span>LLDP System Description</span></dd>
                <dt><span>Operator</span></dt>
                <dd><span>Equal</span></dd>
                <dt><span>Value</span></dt>
                <dd><span>RegDN 6388 MINET_6920</span></dd>
              </dl>
            </li>
          </ul>  <!-- /3nd level -->

        </li>  
      </ul> <!-- /2nd level -->

    </li> <!-- /1st level -->  
  </ul>
</div>

CSS

.data { position: relative; font: 14px Arial;}
.data ul { 
  margin: 0; 
  position: relative;
  padding-left: 45px;
  list-style: none; }

.data dl {
  padding: 0 20px;
  margin: 0 0 15px 0;
  border: 1px #d8d8d8 solid;
  width: 100%;
  display: flex;
  height: 6rem;
  flex-flow: column wrap;
}

.data dt, .data dd {
  margin: 0;
  height: 50%;
  width: 30%;
  line-height: 3rem;
}


.data dl span { 
  line-height: 1.3; 
  display: inline-block; }

.data dt span { vertical-align: middle; }
.data dd span { vertical-align: top; }


.data ul[data-logical-operator]::before {
  display: inline-block;
  content: attr(data-logical-operator);
  background-color: var(--bg);
  color: #fff;
  position: absolute;
  width: 45px;
  bottom: 0;
  line-height: 45px;
  top: 0;
  text-align: center;
  transform: rotateZ(180deg);
  writing-mode: vertical-lr;
}

---

结果