Почему нижняя граница обрезается?

#html #css #angular

#HTML #css #угловой

Вопрос:

Я использую 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 для разметки CSS и html.

1. Ну, у вас есть набор border-bottom. В CSS box-model все стороны границы имеют треугольную точку встречи. Если вы видели какие-либо чистые CSS-треугольники, они используют ту же концепцию для создания треугольников.

Ответ №1:

Проблема: я проверил ваш код, все в порядке, кроме этой строки border-bottom: 0.1px solid #e8e8e8; , из-за border-bottom того, что элемент li имеет трехмерный смысл, и именно поэтому левая сторона искривлена.

Решение:

Чтобы исправить это, вы должны удалить 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;
    }

или вы можете использовать «до» или «после», чтобы создать новый элемент для размещения сплошной формы с правой стороны вашего включенного элемента.

в вашем коде:

       .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;
   }