CSSホバーの問題（パディング）

メニュー項目の周囲にパディングを入れようとすると、その上にマウスを置くと背景色が変わります。しかし、現時点では、詰め物は要素の側にのみ影響を及ぼし、上部または下部には影響を与えない。CSSホバーの問題（パディング）

HTML：

<html> 
<head> 
    <link rel="stylesheet" href="style.css" type"text/css" /> 
</head> 
<body> 
    <div id="container"> 
     <div id="header"> 
      <ul id="menu"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="index.html">About</a></li> 
       <li><a href="index.html">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</body> 
</html>

はCSS：

#container { 
    margin:auto; 
    border:1px solid black; 
    width:960px; 
    height:700px; 
} 

#header { 
    width:960px; 
    height:150px; 
    border: 1px solid blue; 
} 

#menu { 
    width:800px; 
    list-style:none; 
} 

#menu li { 
    float:left; 
    margin-left:20px; 
    border:1px solid black; 
} 

#menu a:hover { 
    background:blue; 
    padding:20px; 
} 

#menu a { 
    padding:20px; 
    height:20px; 
    text-decoration:none; 
}

出典

2012-02-16 ritch

単にheightとして#menu aためdisplay:blockでheight:20pxを置き換える、私が見ることができるものから、冗長なようです。

#menu a { 
    padding:20px; 
    display:block; 
    text-decoration:none; 
}

出典

2012-02-16 12:32:49 Marcel

これは機能しました。ありがとう。 – ritch

CSSホバーの問題（パディング）

答えて

関連する問題