a：ホバーがdivの高さに一致しません

Question

これは簡単なメニューです。

問題は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>

Answer 1

2つのこと動作しませんでした：aはインライン要素なので、

• display:blockとしてa設定し

  を。現在display:inlineニーズである

• しかし、あなたのliは、ブロックレベル要素としてaを保持するためにinline-blockすることが

注：私は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>

上 paddingを box-sizingを追加して使用します

Answer 2

次のコードを試してください。私はいくつかのスタイルを変更しました。それを見てください。これがあなたを助けることを願って！

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>

Answer 3

ここであなたが尋ねたものよりも多くを変更独断答えはだが、おそらくより良いため。あなたが何かを変えたいと思ったらコメントしてください。

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>