Question

我无法设置<li>标记悬停高度。下面是我的html和css代码的jsfiddle。谁能帮我这个。如果有人帮助我，我会很高兴。

以下是我的HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Home</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
   <div id="logo">

   </div>
   <div id="navigation">
      <ul>
        <li id="left"><a href="#home">Home</a></li>
        <li id="left"><a href="#home">About Us</a></li>
        <li id="left"><a href="#home">Events</a></li>
        <li id="left"><a href="#home">Contact Us</a></li>
        <li id="right"><a href="#home">Login</a></li>
      </ul>

   </div>
   <div id="imgbanner">

   </div>
   </body>
   </html>

这是我的css代码：

#logo {
   border-bottom: 2px solid black;
   width: 100%;
   height: 100px;
}

#navigation {
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    color: #888;
    display: block;
    margin: 0;
    overflow: hidden;
    width: 100%; 
}

#navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

}

#navigation li {
    display: inline;
    /*padding: 20px;*/
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; 
 }

 #navigation li:hover {
    background-color: rgb( 251,184,41);
/*  padding: 20px;
*/
}

#navigation a {
    color: #026475;
    display: inline-block;
    line-height: 56px;
    padding: 0 24px;
    text-decoration: none;
}

/*#imgbanner {
   position: absolute;
   border: 2px solid black; 
}
 */
 ul #right {
    float: right;
 }

li #right{
    float: left;
}

运行此当前代码后，我可以将鼠标悬停在两个<li>代码中，但最后<li>代码的高度不同

Answer 1

更新小提琴：http://jsfiddle.net/eve8nsau/1/

更改

#navigation li {
    display: inline;
    ...

到

#navigation li {
    display: inline-block;
    ...

现在，您可能会注意到列表项之间存在一个小差距，但您可以使用各种技术将其删除already discussed on SO

预览（在hover上）

enter image description here

Answer 2

我不明白你为什么只在最后<li>添加“float：left”，我会把它改成：

 li {
     float: left;
 }

使用CSS </li>增加<li>标记悬停

2 个答案: