菜單調整到下面的行而不是全寬

在my website當您剛剛訪問主頁時，菜單看起來很好。只要打開其中一個菜單，所選菜單就會變爲粗體，最後一個菜單項跳轉到下面的行。菜單調整到下面的行而不是全寬

我想要菜單顯示在一行上，而不是跳到下面的行，但我似乎無法找到scr * wing me的部分。任何人有任何建議或知道什麼是錯的？

2015-10-06 CustomX

更改此

#access .current_page_item > a, #access .current_page_ancestor > a 
{ 
    font-weight: bold; 
}

要

#access .current_page_item > a, #access .current_page_ancestor > a 
{ 
    font-weight: normal; 
}

或

#access ul { 
font-size: 13px; 
list-style: none; 
margin: 0 0 0 3em; /*set this to 3em or 3.6em*/ 
padding-left: 0; 
border: 1px solid red; 
}

或

#access a { 
color: #eee; 
display: block; 
line-height: 3.333em; 
padding: 0 1em; /*set this to 1.2125em to 1em*/ 
text-decoration: none; 
}

來源

2015-10-06 19:57:26 CodeRomeos

是的，我知道那是什麼改變了它：d但我找不到爲什麼它在做什麼（也許應該添加） – CustomX

當字體大小增加或粗體時，它也會增加父元素中添加寬度的空間。 – CodeRomeos

確實，只是找不到合適的部分來編輯它 – CustomX

#access div { 
    margin: 0px 8%; 
}

這將解決這個問題。

當其中一個<li>爲粗體時，它會溢出（寬度變大），導致無法滿足邊距參數。因此，刪除粗體或調整邊距。

來源

2015-10-06 19:58:51 Paran0a

您的意思是這個保證金權利，從'nav id = access role = navigation'？ '保證金：0汽車6px' – CustomX

哦，對不起。它在.menu菜單容器上。 media =「all」 #access div {margin}：0 9.5％; } – Paran0a

我想我一定是在錯誤的部分。我做了這個改變，它將菜單向右移動 – CustomX

您可以通過添加不可見的after內容來預留加粗字體的空間。這裏的jsfiddle http://jsfiddle.net/2r4xby06/1（演示是在懸停）

CSS：

ul { 
    font:normal 16px Arial; 
} 

li, a { 
    display: inline - block; 
    text - align: center; 
} 
a { 
    padding: 4px 8px; 
    text - decoration: none; 
    color: #333; 
    text-transform: uppercase; 
} 

a:hover { 
    font-weight:bold; 
} 

a::after { 
    display:block; 
    content:attr(title); 
    font-weight:bold; 
    height:1px; 
    color:transparent; 
    overflow:hidden; 
    visibility:hidden; 
    text-transform: uppercase; 
}

HTML：

<ul> 
    <li><a href="#" title="Home">Home</a></li> 
    <li><a href="#" title="Ploegen">Ploegen</a></li> 
    <li><a href="#" title="VOOR DE JONGSTEN">VOOR DE JONGSTEN</a></li> 
    <li><a href="#" title="KALENDER/STAND">KALENDER/STAND</a></li> 
</ul>

來源

2015-10-06 20:12:13

哇看起來不錯，所以它的填充是否有訣竅，還是別的什麼？ – CustomX

當你刪除height：1px時，隱形（對於人類）僞元素':: after'中的粗體文本。顏色：透明;溢出：隱藏;知名度：隱藏;'你會看到有粗體的文字保留了更大的空間。它必須有'標題'attibute知道什麼文字是內容 –

噢甜！目前對我來說太複雜了！ – CustomX

菜單調整到下面的行而不是全寬

回答

相關問題