HTML – 我需要帮助来制作一个垂直调整大小的栏

发布时间：2020-12-14 22:29:16 所属栏目：资源来源：网络整理

导读：我的问题很简单,我有三个div,它们在视觉上是水平的,但我想将它们保持为相同的方面,但是垂直.我是初学者,我研究并试图自己做,但我做不到.遵循以下代码： .note-icon-bar { width: 20px; margin: 1px auto; border-top: 1px solid #a9a9a9;} div class="note-s

我的问题很简单,我有三个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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!