把锚和李放在相同的大小

Question

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

Answer 1

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

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

Answer 2

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

• 有关访问者点击的信息，请参阅此working 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;
}

---

• 有关访问者点击的信息，请参阅此working Fiddle示例 月份名称和通讯员箭头！

  在此打印屏幕上，您可以在“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;
}