2

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

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

3 回答 3

7

由于您在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;
}

编辑小提琴。

于 2013-08-29T16:21:45.543 回答
0

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

于 2013-08-29T16:21:35.807 回答
0

这给了我你想要的效果......

#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;
}
于 2013-08-29T16:22:34.647 回答