我的问题很简单,我有三个div,它们在视觉上是水平的,但我想将它们保持为相同的方面,但是垂直.我是初学者,我研究并试图自己做,但我做不到.遵循以下代码：
.note-icon-bar {
width: 20px;
margin: 1px auto;
border-top: 1px solid #a9a9a9;
}
<div class="note-statusbar">
<div class="note-resizebar">
<div class="note-icon-bar"></div>
<div class="note-icon-bar"></div>
<div class="note-icon-bar"></div>
</div>
</div>
我想垂直离开这三个小条,让我做一个调整大小的栏.
解决方法
您可以简化代码并使用一个div(2个边框1线性渐变),然后调整所需的值：
.note-icon-bar-v {
Box-sizing:border-Box;
height: 20px;
width: 7px;
margin: 1px auto;
border-right: 1px solid #a9a9a9;
border-left: 1px solid #a9a9a9;
background: linear-gradient(#a9a9a9,#a9a9a9) 2px 0/1px 100% no-repeat;
}
.note-icon-bar-h {
Box-sizing:border-Box;
width: 20px;
height: 7px;
margin: 10px auto;
border-top: 1px solid #a9a9a9;
border-bottom: 1px solid #a9a9a9;
background: linear-gradient(#a9a9a9,#a9a9a9) 0 2px/100% 1px no-repeat;
}
<div class="note-icon-bar-v"></div> <div class="note-icon-bar-h"></div>
