是否有LI等價物用於箱子尺寸：邊框？

我有一個導航條，由UL和幾個LI項目組成。活動導航按鈕具有不同的背景顏色，但我也需要按鈕上的小底部邊框。是否有LI等價物用於箱子尺寸：邊框？

當應用邊框時，它會出現在LI之外。使用div時，您可以使用box-sizing:border-box獲取div內的邊框。但是，你怎樣才能抵消LI項目的邊界？（list-style-position似乎沒有任何效果）

我SCSS代碼：

nav { 
    ul { 
    li { 
     float: left; 
     padding: 0; 

     box-sizing: border-box; 
     list-style-position: inside; 

     &.active { 
     background-color: white; 
     border-bottom: solid 6px blue; 
     box-sizing: border-box; 
     list-style-position: inside; 
     } 
    } 
    } 
}

來源

2017-02-15 Kokodoko

您是否試過* {box-sizing：border-box; }？ – DamiToma

是的，即使您使用display：block – Kokodoko

，框的尺寸確實無法在LI上工作，但確定它的工作原理...當元素具有固定的寬度和/或高度時。元素類型無關緊要。 – BoltClock

當div的工作，你可以使用盒大小：邊界框來獲取DIV中的邊界。

爲了澄清，box-sizing:border-box不使邊界是元素（變化偏移）內，使邊框大小被包含在寬度或高度，當設置，所以也就是說，如果你給li的高度25px和底部邊框5px，內部高度將減少到20px。

但你怎麼能抵消鋰項目

您不能抵消邊境邊界，一個變通方法來顯示/隱藏元素上邊框是用一個僞元素，將避免具有元件跳轉/切換的邊界時調整大小，但有更多的方式，如linear-gradient（示於下面的樣品當懸停）

body { 
 
    background: lightgray; 
 
} 
 
nav ul li { 
 
    position: relative; 
 
    float: left; 
 
    padding: 0 5px; 
 
    list-style-type: none; 
 
} 
 
nav ul li.active::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: -6px; 
 
    background-color: white; 
 
    border-bottom: solid 6px blue; 
 
    z-index: -1; 
 
} 
 

 
/* or one can use linear-gradient */ 
 
nav ul li:hover { 
 
    background: linear-gradient(
 
    to bottom, white calc(100% - 5px), blue 5px 
 
) no-repeat left bottom; 
 
}

<nav> 
 
    <ul> 
 
    <li> 
 
     Some text 
 
    </li> 
 
    <li> 
 
     Some text 
 
    </li> 
 
    <li class="active"> 
 
     Some text 
 
    </li> 
 
    <li> 
 
     Some text 
 
    </li> 
 
    </ul> 
 
</nav>

更新

其實是有辦法抵消邊框，border-image-outset，在這個答案顯示：

border-image-outset in CSS

來源

2017-02-15 16:52:10 LGSon

謝謝，使用僞元素工程！雖然在你的例子中，藍色邊框實際上仍然在白色框下方:)我能夠通過在div上使用插入框陰影來更簡單地修復問題。 – Kokodoko

@Kokodoko自從你問邊界以來，我使用了邊界，並使用'bottom：-6px;'你可以簡單地控制它是否應該在元素的內部或外部...對於這個樣本，我從外部選擇的邊界尺寸是相當大的，並且幾乎與文本重疊，將其設置爲「bottom：0;'並且它將在裏面。 – LGSon

@Kokodoko我也重讀了你的問題，並用'box-sizing：border-box'來更新我的答案 – LGSon

另一個快速，清潔的方式來創建一個內部邊框是創建一個插入陰影沒有模糊。你甚至不需要盒子大小或列表樣式。

nav { 
    ul { 
    li { 
     float: left; 
     padding: 0; 

     &.active { 
     background-color: white; 
     box-shadow: 0px -6px 0px red inset; 
     } 
    } 
    } 
}

來源

2017-02-16 11:57:42 Kokodoko

又一個不錯的選擇:) .... upvoted – LGSon

是否有LI等價物用於箱子尺寸：邊框？

回答

相關問題