为什么边框底部被修剪？

Question

我在列表中使用 CSS 来为列表中的选定项目显示实心边框。一切正常，除了该实体的左下角以倾斜的方式被切断，而它在顶部正确显示。我做错了什么？

CSS：

.item {
  list-style: none;
  width: -webkit-fill-available;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 37px !important;
  font-weight: 600;
  border-bottom: 0.1px solid #e8e8e8;
  margin-right: 200px;
}

.menu {
  background: #F8F9FA;
  min-height: 100%;
  float: left;
  width: 100%;
  position: absolute;

  ul {
    margin: 0px;
    list-style: none;
    padding: 0px;

    li {
      font-size: 13.5px;
      padding: 10px;
    }

    li:hover {
      text-decoration: none;
      background-color: #f3f4f5;
    }
  }
}

.enable {
  background-color: #FFFFFF !important;
  border-right: 5px solid #3081ed;
}

HTML：

<div class="menu">
          <ul style="display: inline">
            <li class="item" [ngClass]="{'enable': selectedItem == 'Test 1'}" (click)="selectedItem = 'Test 1'">
              <span class="ml-2"> Test 1 </span>
            </li>
            <li class="item" [ngClass]="{'enable': selectedItem == 'Test 2'}" (click)="selectedItem = 'Test 2'">
              <span class="ml-2"> Test 2 </span>
            </li>
          </ul>
        </div>

这是一个 stackblitz demo 附加的 CSS 和 html 标记。

Answer 1

问题：我检查了你的代码，除了这行 border-bottom: 0.1px solid #e8e8e8;之外一切都很好 因为border-bottom，li元素有立体感，所以左边是歪的。

解决方案：

1. 要解决这个问题，您应该删除border-bottom，而不是使用CSS Shadow；像 => box-shadow: 0px 0.1px #000;

在您的代码中：

    .item {
        list-style: none;
        width: -webkit-fill-available;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 200px !important;
        font-weight: 600;
       /* border-bottom: 0.1px solid #e8e8e8; */      =>remove this line
        box-shadow: 0px 0.1px #000;                   =>add this line
        margin-right: 200px;
    }

1. 或者您可以使用 'before' 或 'after' 创建一个新元素，以便在启用的项目的右侧放置一个实体形状。

在您的代码中：

      .enable {
         background-color: #FFFFFF !important;
         /* border-right: 5px solid #3081ed; */    =>remove this line
          position:relative;                       => add this line
      }

      li.item.enable::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 37px;
      position: absolute;
      right: 0;
      background: #3081ed;
   }