如何在制作圆形标签链接时解决这个小问题?

时间:2012-03-20 18:49:24

标签: html css hyperlink

这是一个实例:

http://jsfiddle.net/Pzvdv/

<ul id="navigation">
    <li><a href="#">HOME</a></li>
    <li><a href="#">OUR APPROACH</a></li>
    <li><a href="#">MENU</a></li>
    <li><a href="#">GET IN TOUCH</a></li>    
</ul>

#navigation {
    float: left;
    list-style-type: none;
}

#navigation li {    
    background-color: #934B00;
    border-radius: 6px 6px 0 0;
    color: White;
    cursor: pointer;
    float: left;
    font-size: 12px;
    margin-right: 6px;
    padding: 5px;
}

#navigation li a:link {
    color: White;
    text-decoration: none;
}

请注意,如果我小心的话,我可以点击链接,但是当我点击“tab pill”本身时,链接不会被点击。

任何变通方法或更好的方法来实现这种视觉效果?

我想关注链接href,无论用户是单击实际字母还是容器丸。

7 个答案:

答案 0 :(得分:2)

填充和其他样式必须从<li>移动到<a> 最重要的是,您必须将display:blockdisplay:inline-block添加到锚点。

目前,您的代码无法正常工作,因为<li>上的填充会在<li>边框和锚点之间增加一个间隙。

http://jsfiddle.net/Pzvdv/9/

#navigation li {    
    color: White;
    cursor: pointer;
    float: left;
    font-size: 12px;
    margin-right: 6px;
}

#navigation li a:link {
    display: block;               /* Or inline-block */
    color: White;
    text-decoration: none;
    background-color: #934B00;
    border-radius: 6px 6px 0 0;
    padding: 5px;
}

答案 1 :(得分:1)

如果你在链接元素中添加一些填充,如下所示:

#navigation li a {
    padding:5px
}

它应该工作。

答案 2 :(得分:0)

设置a显示为块,即:

a { display:block; }

并将高度/宽度添加到100%,并将所有填充也移动到那里。这将使它填满整个列表项。

答案 3 :(得分:0)

链接的css需要应用于锚点。

#navigation li {    
    float: left;
 }

#navigation li a {
  color: White;
  text-decoration: none;
  background-color: #934B00;
  border-radius: 6px 6px 0 0;
  color: White;=
  font-size: 12px;
  margin-right: 6px;
  padding: 5px;
  cursor: pointer;
}

答案 4 :(得分:0)

答案 5 :(得分:0)

您将所有演示文稿样式添加到li元素而不是实际链接,只需切换它们,您的药丸菜单就可以正常工作:

#navigation li {
    float:left;
}

#navigation li a {    
    background-color: #934B00;
    border-radius: 6px 6px 0 0;
    color: White;
    cursor: pointer;
    font-size: 12px;
    margin-right: 6px;
    padding: 5px;
}

答案 6 :(得分:0)

您应该设置<a>元素本身的样式。

#navigation {
    float: left;
    list-style-type: none;
}

#navigation li a:link {
    color: White;
    text-decoration: none;
    background-color: #934B00;
    border-radius: 6px 6px 0 0;
    color: White;
    cursor: pointer;
    float: left;
    font-size: 12px;
    margin-right: 6px;
    padding: 5px;
}