徘徊整个李而不是文本

时间:2014-02-08 21:26:12

标签: html css

我正试图在悬停时有一个链接,如果你知道我的意思,它会围绕整个li,而不仅仅是文本本身。

如果我的CSS完全混乱,请提前道歉。

CSS:

#navi {
    font-size:14px;
    text-align:left;
    text-transform:uppercase;

}

#navi ul {
    padding: 5px;
    margin: 0;
}

#navi li {
    position:relative;
    display:inline-block;   
}

#navi a {
    padding:.03em 1em;
    text-decoration: none;
}

#navi a:hover { 
    background-color: #e0e0e0;
    height: 50px;
}

指数:

<div id="navi">
<ul class="ul">
    <li><a href="">Test 1</a></li>
    <li><a href="">Test 1</a></li>
    <li><a href="">Test 1</a></li>                      
</ul>
</div>

它看起来像什么:

enter image description here

这就是盘旋时的样子:

enter image description here

有什么建议吗?我只想让它绕过整个盒子。谢谢!

3 个答案:

答案 0 :(得分:1)

将链接设为block,然后根据需要添加padding。 为了更好看,我会从<ul>

中删除填充
#navi a {
  display: block;
  padding:.03em 1em;
  text-decoration: none;
}

示例:http://jsfiddle.net/6Cz7X/ - 对CSS进行了一些更改:

#navi {
  font-size:14px;
  text-transform:uppercase;
}

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

#navi li {
  float:left; 
}

#navi a {
  display: block;
  padding: 1em 1em;
  text-decoration: none;
}

#navi a:hover { 
  background-color: #e0e0e0;
}

或添加line-height

答案 1 :(得分:1)

您可以将<a>设置为display:block,然后在那里应用垂直填充:http://codepen.io/anon/pen/nmqKr

#navi {
  font-size:14px;
  text-align:left;
  text-transform:uppercase;
  background:blue;
border-bottom:solid turquoise 5px;
}

#navi ul {
  padding:0 5px;/* send vertical padding into a tag */
  margin: 0;
}

#navi li {
  display:inline-block;   
}

#navi a {
  padding:5px 1em;/* apply here the vertical-padding */
  text-decoration: none;
  display:block;/* take all width and have no gaps at bottom */
  height:100%;
  color:white;
}

#navi a:hover { 
  background-color: #e0e0e0;
  color:black;
}

答案 2 :(得分:0)

您可以使用div来代替普通链接。然后,您可以将其背景颜色更改为悬停。