我正在尝试匹配仅基于 HTML 和 CSS 的嵌套 Accordion 布局,以匹配如下所示的模型:
我的实现布局如下所示:
设计中存在对齐旋转文本和宽度问题的居中对齐问题。
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>
最佳答案
我的尝试:
一些规范:
- 所有逻辑运算符都是列表的
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;
}
结果
关于html - 旋转时如何将 span 或 div 对齐到中间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55295768/