HTML + CSS標籤欄

如何清晰地設置HTML + CSS水平標籤欄的樣式，以便標籤欄在活動標籤頁的底部隱藏或隱藏一行？HTML + CSS標籤欄

換句話說，我試圖做到這一點的StackOverflow確實爲它的標籤同樣的事情： enter image description here

我的標籤欄被設置爲一個有序列表與

ul 
{ 
    list-style: none; 
} 
li 
{ 
    float: left; 
}

更新：我已經使用Firebug瀏覽過網站，看看它們是如何做的，但我覺得我很快就陷入了細節之中。例如，StackOverflow的版本在整個div底部有一個邊框（這很合理），在活動選項卡底部有一個白色邊框（這很合理），但是它會使活動選項卡的邊框與div邊框重疊（而且我不清楚它是如何做到的）。它看起來像Twitter Bootstrap做類似的事情。我試圖理解一個容器邊界與內容邊框的重疊部分如何工作的一般概念，而不是使用CSS進行復制和修補，直到我看到工作正常。

來源

2013-01-17 Josh Kelley

你嘗試過什麼？或者至少從StackOverflow的CSS獲取代碼？ – DrCord

所有你需要做的就是在<ul>上放置一個底部邊框（以便延伸），然後給<li>選擇一個班級，並使該班級的高度增加1個像素。

這是一個很簡單的例子：http://jsfiddle.net/V6gzS/

來源

2013-01-18 14:54:32 skyline3000

確定你指出正確的方向使用螢火蟲或鉻合金元素督察，只是挑選出你所需要的位，所以在這個網站，例如你正在尋找被稱爲標籤和他們的風格像這樣

#tabs a.youarehere { 
background: #fff; 
border: 1px solid #ccc; 
border-bottom-color: #ffffff; 
color: black; 
font-size: 120%; 
height: 30px; 
line-height: 28px; 
margin-top: 3px; 
padding: 0px 11px 0px 11px; 
}

這只是其中的一部分，但你可以通過看一些代碼

來源

2013-01-17 15:15:03 Richlewis

學到了很多我的理解是，你能夠通過自己製作的按鈕，與水平的底線。

如果是這種情況，請確保每個按鈕上的水平線都是border-bottom: solid 1px #CCC屬性（顏色可能不同）。然後在每個頁面上，將ID id="current"添加到那個作爲活動頁面的按鈕。在CSS中這樣寫：

#current { 
    border: solid 1px #CCC; 
    border-bottom: 1px solid white; 
}

如果你有可能通過增加!important這樣可以解決任何問題：

border-bottom: 1px solid white !important;

因此，這是在CSS短短四年的代碼中加入額外的線條和一個額外的HTML屬性在每個文件中。

如果動態菜單

如果你有一個菜單，是不是每個頁面上靜態的，但也許動態生成或放置在一個包含文件，那麼上面的將是不可能的。因爲那樣你就不能在每個單獨的頁面上輕鬆添加新的ID。

在這種情況下，您可能會動態添加屬性。如果使用服務器端語言，例如PHP，那麼你可能很容易設置一個if{...}命令來檢查URL或GET請求等。否則，您可能會使用一些JavaScript來檢查每個按鈕，並添加屬性id，如果按鈕文本等於頁面上的某個標題。

我希望你能理解。祝你好運。

來源

2013-01-17 15:34:08 Steeven

如果我想讓邊框延伸到整個標籤欄（而不僅僅是每個按鈕/標籤恰好在哪裏），該怎麼辦？ –

@JoshKelley。我不確定我明白你的意思。如果邊框比按鈕寬度延伸得更遠，您將如何創建在問題圖片中顯示的圖片？縱向邊界應該做什麼？ – Steeven

@Steven - 我希望標籤欄的邊框可以擴展屏幕或父級的寬度（如SO和Twitter Bootstrap），即使標籤按鈕不會擴展屏幕的寬度。我仍然很模糊地這樣做;如果我給每個標籤一個不透明的邊框（如你所說），那麼邊框不會擴展屏幕的寬度，如果我給整個標籤欄一個底部邊框，那麼活動標籤;白色底部邊框位於上方而不是取代它的邊界。 –

我做了這樣的：

ul { 
    list-style-type:none; 
} 
li{ 
    float: left; 
    border-bottom: 1px solid #CCC; 
} 
li:hover{ 
    float: left; 
    border: solid 1px #CCC; 
    border-bottom:none; 
}

來源

2017-01-20 21:29:26

HTML + CSS標籤欄

回答

相關問題