html - 同じサイズの錨と李を置く

Question

liの中にアンカーを配置する必要があります。これは、1つの要素であるかのように同じスペースを使用します。実際、次の画面を作成したいと思います。http: //postimage.org/image/w2q9ei21r/ 開始したばかりのコードはすでにありますが、アンカーがliの同じスペースを占めていないため、問題が発生しました。助けていただければ幸いです。 http://jsfiddle.net/Br9Km/2/

Answer 1

この構造を使用して、画像に表示されている内容を実現できます。

• 訪問者に月の名前をクリックさせる方法については、この実用的なフィドルの例を参照してください。

  この印刷画面では、「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;
}

Answer 2

<a>タグスタイルをに設定できますdisplay:block。

liのようなブロック要素は、divデフォルトで使用可能な幅全体を埋めます。次に、高さを適切に入力するようにheightofタグを設定することもできます。<a>