我的导航列表是重叠的填充。(My navigation list is overlapping padding. How can I prevent this?)

我的导航列表是重叠的填充。(My navigation list is overlapping padding. How can I prevent this?)

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

JSFiddle： http : //jsfiddle.net/Hh7XG/1/

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 | ^

I am trying to make a navigation that highlights the area around the link when you hover over it, and allows you to click on the any area of the highlight to follow that link. It seems that my padding is overlapping and you can only click on the padding to the left of the link, whereas the padding on the right becomes the left padding of the link the the right.

JSFiddle: http://jsfiddle.net/Hh7XG/1/

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; }

(Sorry if the below does not make sense. I would be more than happy to clarify.)

I want it to display like this: (| is the border between li's)

| Link | Link | Link |

When I hover over the padding to the right of the leftmost link, I would like it to look like this: (X is the highlight, ^ is my mouse)

|XXXXLinkXXXX| Link | Link ^

but it is acting like this:

| Link| Link| Link |

When the mouse is hovering over the leftmost link the highlight looks like this:

|XXXXLinkXXXX|Link | Link ^

but when I hover over the padding to the right of of the link it looks like this:

| Link|XXXXLinkXXXX|Link | ^

最满意答案

由于您在锚标记上使用了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;
}
 
 编辑小提琴 。 
Since you're using padding property on your anchor tags to increase their width, it doesn't need to specify width: 100%. Just remove that, and it works:
 
#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.