Question

当我将鼠标悬停在链接上时，我正在尝试制作一个突出显示链接周围区域的导航，并允许您点击突出显示的任意区域以关注该链接。看起来我的填充是重叠的，你只能点击链接左边的填充，而右边的填充变成右边链接的左边填充。

HTML

<div id="menubar">
      <ul>
        <li><a href=# >Home</a></li>
        <li><a href=# >About Us</a></li>
        <li><a href=# >Online Courses</a></li>
        <li><a href=# >Registration</a></li>
        <li><a href=# >Faculty</a></li>
        <li><a href=# >Calendar</a></li>
        <li><a href=# >Store</a></li>
        <li><a href=# >Testimonials</a></li>
        <li><a href=# >Online Lectures</a></li>
        <li><a href=# >Contact Us</a></li>
        <li><a href=# >Forum</a></li>
        <li><input class="searchbox" trype="text" value="Search" onfocus="this.value='';" onblur="if(this.value=='') this.value='Search';"/> </li>
      </ul>
    <div style="clear:both;"></div>
    </div>

CSS

#menubar{
height:auto;
background:#ebebec;
margin-top:0px;
padding-top:0px;
padding-left:0px;
}
ul{
list-style-type:none;
padding:0px;
margin:0px;
}
#menubar ul li{
text-decoration:none;
color:#005da4;
text-align:center;
margin:none;
width:auto;
padding-left:0;
padding-right:0;
float:left;
}
#menubar ul li:hover a{
background:#acce39;
}
#menubar ul li a{
text-decoration:none;
color:#005da4;
display:block;
width:100%;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
margin-left:0;
margin-right:0;
}
.searchbox
{
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:solid 1px black;
    padding:5px;
    margin:5px;
    margin-left:15px;
    align:left;
}

（对不起，如果以下内容没有意义。我非常乐意澄清。）

我希望它显示如下:( |是li之间的边界）

|    Link    |    Link    |    Link    |

当我将鼠标悬停在最左侧链接右侧的填充上时，我希望它看起来像这样:( X是突出显示，^是我的鼠标）

|XXXXLinkXXXX|    Link    |    Link
           ^

但它的行为是这样的：

|    Link|    Link|    Link    |

当鼠标悬停在最左边的链接上时，突出显示如下所示：

|XXXXLinkXXXX|Link    |    Link
    ^

但当我将鼠标悬停在链接右侧的填充上时，它看起来像这样：

|    Link|XXXXLinkXXXX|Link    |
           ^

Answer 1

由于您在锚标记上使用padding属性来增加其宽度，因此无需指定width: 100%。只需删除它，它就可以了：

#menubar ul li a {
    text-decoration:none;
    color:#005da4;
    display:block;    /* Since li element is floated itself */
                      /* it doesn't need to use inline-block value for display */

    /* width:100%; */ /* <-- remove this declaration */
    padding: 10px 20px;
    text-align:center;
    margin-left:0;
    margin-right:0;
}

<强> Edited Fiddle

Answer 2

请检查小提琴http://jsfiddle.net/Hh7XG/3/ 我还将padding添加到了li。

Answer 3

这给了我你正在寻找的效果......

#menubar ul li{
text-decoration:none;
color:#005da4;
text-align:center;
margin:none;
width:auto;
padding-left:0;
padding-right:20px; // changed
float:left;
}
#menubar ul li:hover a{
background:#acce39;
}
#menubar ul li a{
text-decoration:none;
color:#005da4;
display:inline-block;
width:100%;
padding-left:10px; // changed
padding-right:10px; // changed
padding-top:10px;
padding-bottom:10px;
text-align:center;
margin-left:0;
margin-right:0;
}

我的导航列表是重叠填充。我怎么能阻止这个？

3 个答案: