html - 我需要帮助来制作垂直调整大小栏

Question

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

我想将这三个小条垂直放置，以便我制作调整大小条。

Answer 1

您可以简化您的代码并使用一个 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>