html - 将anchor和li放在相同大小

Question

我需要在我的 li 中放置一个锚点，使用相同的空间，就好像它只是一个元素一样。其实我想搭建这个画面： http: //postimage.org/image/w2q9ei21r/ 我已经有一个代码我刚开始，但是我遇到了一些问题，因为锚没有占用相同的空间 li。我很感激任何帮助。 http://jsfiddle.net/Br9Km/2/

Answer 1

您可以将<a>标签样式设置为display:block.

默认情况下，块元素，如li或div将填充整个可用宽度。然后您还可以设置heightof<a>标签以正确填写高度。

Answer 2

您可以使用以下结构实现图像上呈现的内容：

• 请参阅这个有效的 Fiddle示例，让访问者点击月份名称！

  在此打印屏幕上，您可以看到鼠标悬停在“Fevereiro”月份上。

  

CSS

/* rounded corners */
#ConteudoMeses li, #ConteudoMeses li a, #ConteudoMeses li span {
    border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    behavior: url(/Themes/Default/Scripts/PIE.htc);
}

/* LI element format */
#ConteudoMeses li {
    display: inline-block;
    width: 140px;
    height: 76px;
    margin: 0 0 8px 0;
}

/* link format */
#ConteudoMeses li a {
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    line-height: 74px;
    width: 110px;
    color: white;
}

/* arrow holder format */
#ConteudoMeses li span {
    float: right;
    display: block;
    height: 74px;
    width: 20px;
}

---

• 请参阅此工作小提琴示例，让访问者单击月份名称和对应的箭头！

  在此打印屏幕上，您可以看到鼠标悬停在“Fevereiro”月份上。

  

CSS

#ConteudoMeses li, #ConteudoMeses li a, #ConteudoMeses li span {
    border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    behavior: url(/Themes/Default/Scripts/PIE.htc);
}
#ConteudoMeses li {
    display: inline-block;
    width: 140px;
    height: 76px;
    margin: 0 0 8px 0;
}

#ConteudoMeses li a {
    display: block;
}
#ConteudoMeses li .label {
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    line-height: 74px;
    width: 110px;
    color: white;
}

#ConteudoMeses .arrow {
    float: right;
    display: block;
    height: 74px;
    width: 20px;
}