a：懸停與div高度不匹配

問題是a:hover。 a:hover高度必須與mainmenu div相同，但現在不是。我試圖消除邊界和利潤，但它沒有工作

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 87%; 
 
    color: #333399; 
 
} 
 

 
#mainmenu { 
 
    float: right; 
 
    width: 680px; 
 
    background-color: #BAB3D6; 
 
    height: 23px; 
 
    text-align: right; 
 
    line-height: 23px; 
 
} 
 

 
#mainmenu ul { 
 
    margin: 0px; 
 
    border: 0px; 
 
} 
 

 
#mainmenu li { 
 
    display: inline; 
 
    margin-right: 20px; 
 
    text-decoration: none; 
 
} 
 

 
#mainmenu li a { 
 
    text-decoration: none; 
 
} 
 

 
#mainmenu li a:hover { 
 
    background-color: #652D91; 
 
    color: #FFFFFF; 
 
    border: 1px solid #652D91; 
 
}

<div id="mainmenu"> 
 
    <ul> 
 
    <li><a href="#">test</a></li> 
 
    <li><a href="#">test 1</a></li> 
 
    <li><a href="#">test 2</a></li> 
 
    </ul> 
 
</div>

來源

2017-02-23 Alberto Alibaba

爲什麼你會添加相同顏色的邊界？ – Julix

@Julix我不想要邊框 –

那麼爲什麼你會有邊界開始呢？ - 我大肆猜測你正在做什麼（鑑於我們沒有看到其他頁面可能不是你在上下文中需要的東西......我拿出了固定寬度和小字號東西，顯然隨意加回來，如果這是故意的） – Julix

兩件事情：

設置a爲display:block，因爲a是一個內聯元素。
但你li這是目前display:inline需求是一個inline-block持有a爲塊級元素

注：我加box-sizing和使用padding超過height/line-height

*, 
 
*::before, 
 
*::after { 
 
    box-sizing: border-box 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 87%; 
 
    color: #339; 
 
} 
 

 
#mainmenu { 
 
    float: right; 
 
    text-align: right; 
 
    width: 680px; 
 
    background-color: #BAB3D6; 
 
} 
 

 
#mainmenu ul { 
 
    margin: 0; 
 
    border: 0; 
 
} 
 

 
#mainmenu li { 
 
    display: inline-block; 
 
    margin-right: 20px; 
 
} 
 

 
#mainmenu li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 12px 0 
 
} 
 

 
#mainmenu li a:hover { 
 
    background-color: #652D91; 
 
    color: #FFF; 
 
}

<div id="mainmenu"> 
 
    <ul> 
 
    <li><a href="#">test</a></li> 
 
    <li><a href="#">test 1</a></li> 
 
    <li><a href="#">test 2</a></li> 
 
    </ul> 
 
</div>

來源

2017-02-23 02:05:27 dippas

非常感謝，工作！ –

請嘗試下面的代碼。我修改了一些樣式，請看看它。希望這可以幫助你！

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 87%; 
 
    color: #333399; 
 
} 
 

 
#mainmenu { 
 
    float: right; 
 
    width: 680px; 
 
    background-color: #BAB3D6; 
 
    height: 23px; 
 
    text-align: right; 
 
    line-height: 23px; 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 

 
#mainmenu ul { 
 
    margin: 0px; 
 
    position: absolute; 
 
    right: 0px; 
 
    overflow: auto; 
 
} 
 

 
#mainmenu li { 
 
    list-style: none; 
 
    float: left; 
 
    margin: 0px 5px; 
 
} 
 

 
#mainmenu li a { 
 
    display: block; 
 
    padding: 0px 10px; 
 
    text-decoration: none; 
 
} 
 

 
#mainmenu li a:hover { 
 
    background-color: #652D91; 
 
    color: #FFFFFF; 
 
}

<div id="mainmenu"> 
 
    <ul> 
 
    <li><a href="#">test</a></li> 
 
    <li><a href="#">test 1</a></li> 
 
    <li><a href="#">test 2</a></li> 
 
    </ul> 
 
</div>

來源

2017-02-23 02:30:39

下面是一個自以爲是的回答改變比你的要求更多，但可能更好。評論你是否想要改變任何東西。

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    color: #333399; 
 
} 
 

 
#mainmenu { 
 
    background-color: #BAB3D6; 
 
} 
 

 
#mainmenu ul { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    vertical-align: top; 
 
    list-style: none; 
 
    text-align: right; 
 
} 
 

 
#mainmenu li { 
 
    text-align: center; 
 
    height: 100%; 
 
    display: inline-block; 
 
} 
 

 
#mainmenu li a { 
 
    text-decoration: none; 
 
    display: block; 
 
    padding: 0.25em 20px; 
 
} 
 

 
#mainmenu li a:hover { 
 
    background-color: #652D91; 
 
    color: #FFFFFF; 
 
}

<div id="mainmenu"> 
 
    <ul> 
 
    <li><a href="#">test</a></li> 
 
    <li><a href="#">test 1</a></li> 
 
    <li><a href="#">test 2</a></li> 
 
    </ul> 
 
</div>

來源

2017-02-23 02:50:23 Julix

a：懸停與div高度不匹配

回答

相關問題