JavaScript — как я могу применить границы CSS наряду с заполнением CSS

Как я могу применить границы CSS вместе с заполнением CSS

У меня есть требование условно выделить пункт меню для существующего приложения. Чтобы выделить элемент, я использую нижнюю границу для этого конкретного элемента. Но уже применяется отступ, и выделенная строка должна быть внизу (прикрепленные изображения для справки)

Изменить: Может быть, изображение здесь сбивает с толку, чтобы быть более ясным, 8px в классе menu-list-menu-bar применяется ко всему div, и когда я пытаюсь выделить отдельные элементы, сначала появляется граница, а затем отступ. Но я хочу, чтобы отступ был первым, а затем подчеркивание.

введите описание изображения здесь

 .menulist { background: white; color: black; font-family: 'Times New Roman', Times, serif; transition: height .3s; z-index: 9; width: 100%; } .menulist .menulist-menu-bar { display: flex; align-items: center; flex-wrap: wrap; padding: 8px; justify-content: flex-start; position: relative; justify-content: inherit; } .menulist .menulist_nav { padding-left: 0; list-style: none; font-size: 14px; line-height: 1.71; font-weight: normal; margin: 0; display: flex; flex-wrap: wrap; align-content: center; align-items: stretch; height: 100%; } .menulist_bottom_border { border-bottom: 2px solid; border-color: gray; margin-left: 20px; } 
 {amp}lt;header class="menulist"{amp}gt; {amp}lt;div class="menulist-menu-bar"{amp}gt; {amp}lt;div{amp}gt; {amp}lt;ul class="menulist_nav"{amp}gt; {amp}lt;div class="menulist_bottom_border"{amp}gt;nav1{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;nav2{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;nav3{amp}lt;/div{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/header{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector