亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

我如何應用 css 邊框和 css 填充

我如何應用 css 邊框和 css 填充

慕蓋茨4494581 2021-11-25 16:07:28
我需要有條件地突出顯示現有應用程序的菜單項。為了突出顯示該項目,我為該特定項目使用了底部邊框。但是已經有一個正在應用的填充并且突出顯示的行需要在底部(附上圖像以供參考).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>
查看完整描述

2 回答

?
鴻蒙傳說

TA貢獻1865條經驗 獲得超7個贊

兄弟,它正在工作??吹竭@個:-


.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 具有類菜單列表底部邊框。由于大多數 elems 具有 flex display 屬性,所以它看起來像那樣。


查看完整回答
反對 回復 2021-11-25
?
白豬掌柜的

TA貢獻1893條經驗 獲得超10個贊

正如我所理解的,你的問題解釋了我可能對你有幫助的想法。

  1. 文本和邊框底部之間的填充是因為 line-hight: 1.71;

  2. 圖像中顯示的黃色填充是因為在 class 上應用了填充menulist-menu-bar。

如果您想刪除其中任何一個,那么您可以使用這些值來獲得所需的輸出。


查看完整回答
反對 回復 2021-11-25
  • 2 回答
  • 0 關注
  • 155 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號