html - 把 anchor 和 li 放成相同大小

Question

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

Answer 1

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

• 查看此 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;
}