我如何应用 css 边框和 css 填充

Question

我需要有条件地突出显示现有应用程序的菜单项。 为了突出显示该项目，我为该特定项目使用了底部边框。 但是已经有一个正在应用的填充，并且突出显示的行需要在底部（附图供参考）

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

 <header class="menulist"> <div class="menulist-menu-bar"> <div> <ul class="menulist_nav"> <div class="menulist_bottom_border">nav1</div> <div>nav2</div> <div>nav3</div> </ul> </div> </div> </header>

Answer 1

兄弟，它正在工作。 看到这个： -

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

 <header class="menulist"> <div class="menulist-menu-bar"> <div> <ul class="menulist_nav"> <div class="menulist_bottom_border">nav1</div> <div class="menulist_bottom_border">nav2</div> <div class="menulist_bottom_border">nav3</div> </ul> </div> </div> </header>

您看到了意想不到的事情，因为只有一个 div 具有 class 菜单列表底部边框。 由于大多数元素都有 flex display 属性，所以看起来像这样。

Answer 2

将文本包装在没有任何填充的单独元素中。

此外， ul （无序列表）应仅包含li （列表项）元素，如HTML 元素参考中所述。

我设置了列表项的样式，以便以蓝色显示填充，仅用于演示目的：

 .menulist { background: white; color: black; font-family: 'Times New Roman', Times, serif; transition: height.3s; z-index: 9; width: 100%; }.menulist-menu-bar { display: flex; align-items: center; flex-wrap: wrap; padding: 8px; justify-content: flex-start; position: relative; justify-content: inherit; }.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_nav li { padding: 16px; background-color: lightblue; margin: 4px; }.menulist_bottom_border { border-bottom: 2px solid; border-color: gray; margin-left: 20px; }

 <header class="menulist"> <div class="menulist-menu-bar"> <div> <ul class="menulist_nav"> <li> <span class="menulist_bottom_border"> nav1 </span> </li> <li> <span> nav2 </span> </li> <li> <span> nav3 </span> </li> </ul> </div> </div> </header>

Answer 3

据我了解，您的问题解释了我的想法，这可能对您有所帮助。

1. 文本和边框底部之间的填充是因为line-hight: 1.71;
2. 图像中显示的黄色填充是因为在 class menulist-menu-bar上应用了填充。

如果您想删除其中任何一个，则可以使用这些值来获得所需的 output。