boder-bottom

Question

为什么我在搜索列表中加了border-bottom后，只有部分城市名称下面有1像素边框？

<div class="search-content">
      <ul>
        <li class="search-item border-bottom" v-for="item of list" :key="item.id">
          {{item.name}}
        </li>
      </ul>
</div>`

Answer 1

Dell 2022-12-03 18:56:30

chrome 控制台看一下样式，是被覆盖了，还是高度给盖住了？

• 提问者 慕UI5297780 #1

  在控制台看了下，把以下样式失效就正常了，为什么？
  .border-bottom:before {
  -webkit-transform-origin: 0 100%; 
  transform-origin: 0 100%;
  height：1px
  }
  但是在代码中具体怎么样才能让这三个样式失效？

• 提问者 慕UI5297780 #2

  可以了，在search组件中添加以下样式：
  .border-bottom
    &:before
      height 0
      transform-origin 0 0
  这样就覆盖了原来的样式