vue.js 如何在CSS中移动元素而不影响边框

vnjpjtjt 于 2023-11-21 发布在 Vue.js

关注(0)|答案(1)|浏览(148)

的数据
我想让边界具有相同的长度，但保持每个嵌套级别上的缩进，如this：

的
这是我现在的代码：

<template>
  <div class="directory-tree">
    <div class="folder">
      <div class="folder-title">
        <i class="icon-folder1"></i>
        <span class="folder-label">Partials</span>
        <i class="icon-angle-right"></i>
      </div>
      <div class="folder-content">
        <div class="folder">
          <div class="folder-title">
            <i class="icon-folder1"></i>
            <span class="folder-label">Blog Details</span>
            <i class="icon-angle-right"></i>
          </div>
          <div class="folder-content">
            <div class="folder">
              <div class="folder-title">
                <i class="icon-folder1"></i>
                <span class="folder-label">Sample</span>
                <i class="icon-angle-right"></i>
              </div>
              <div class="folder-content"></div>
            </div>
          </div>
        </div>
        <div class="folder">
          <div class="folder-title">
            <i class="icon-folder1"></i>
            <span class="folder-label">Blog Content</span>
            <i class="icon-angle-right"></i>
          </div>
          <div class="folder-content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="sass" scoped>
i
  font-size: 16px

.directory-tree
  color: var(--ins-text-1)
  font-size: 12px
  line-height: 20px

.folder-content > div
  padding-left: 24px
.folder-title
  padding-top: 12px
  padding-bottom: 12px
  padding-left: 16px
  padding-right: 16px
  display: flex
  column-gap: 8px
  align-items: center
  position: relative

  &::before
    content: ""
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 1px
    background-color: var(--ins-ui-3)

.folder-label
  flex-grow: 1
  font-weight: 600
</style>

字符串
这就是我尝试过的，我没有增长到我想要的宽度的伪边界（如果第一个宽度相同）。
有没有一种方法，使边界顶部相同的宽度，但有一个缩进的每一个嵌套的文件夹？

vue.js

来源：https://stackoverflow.com/questions/77515154/how-to-move-an-element-without-affecting-the-border-in-css

1条答案

按热度按时间

inb24sb21#

这可能会有帮助。这是在CSS中完成的。在.folder:before中，根据您的喜好更改宽度（wv是视口宽度，即窗口的宽度，您也可以像这样使用width: calc(100vw - 10px)来更准确地定位。使用height:来控制线条的粗细。

body {
  margin: 20px;
} 
.folder-title{
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  column-gap: 8px;
  align-items: center;
  position: relative
}
.folder-label{
  flex-grow: 1;
}
.folder-content .folder-title{
  padding-left: 45px;
}
.folder-content .folder-content{
  padding-left: 30px;
}

.folder:before{
  content: '';
  position: absolute;
  width: 100vw;
  left: 8px;
  height: 1px;
  background-color: grey;
}

.icon-folder1 {
    width: 30px;
    height: 20px;
    display: inline-block;
    position: relative;
    background-color: #708090;
    border-radius: 0 3px 3px 3px;
}

.icon-folder1:before {
    content: '';
    width: 50%;
    height: 0.2em;
    border-radius: 0 20px 0 0;
    background-color: #708090;
    position: absolute;
    top: -0.2em;
    left: 0px;
}

.icon-angle-right {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  float: right;
}

个字符

赞(0）回复(0）举报 2023-11-21

我来回答

vue.js 如何在CSS中移动元素而不影响边框

1条答案

相关问题

热门标签

最新问答