这是一个实例:
<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,无论用户是单击实际字母还是容器丸。
答案 0 :(得分:2)
填充和其他样式必须从<li>
移动到<a>
最重要的是,您必须将display:block
或display:inline-block
添加到锚点。
目前,您的代码无法正常工作,因为<li>
上的填充会在<li>
边框和锚点之间增加一个间隙。
#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;
}