html - a:hover 上のリンクを囲む等長の背景ボックス

Question

リンク付きのリストを作成しようとしていますが、テキストの背景を同じ長さにしたいのです。すべての単語が同じ長さである場合、これは完全に機能しますが、より長い単語の場合、単語が引き伸ばされ、均等に並べられません。これは私が意味するものです：

    <div id="menu">
            <a href="#">Pealeht</a><br />
            <a href="#">Treening</a><br />
            <a href="#">Toitumine</a><br />
            <a href="#">Galerii</a><br />
    </div>

CSS:

a:link {
    color: white;
    text-decoration: none;
    padding: 10px;
}      /* unvisited link */
a:visited {
    color: white;
    text-decoration: none;
}  /* visited link */
a:hover {
    color: white;
    background-color: #C00;
    padding: 5px 100px;
    font-size: 14px;
}  /* mouse over link */
a:active {
    color: white;
    background-color: #C00;
    padding: 5px 100px;
    font-size: 14px;
}  /* selected link */

何か案は？

Answer 1

リンクに幅を設定します。高さと幅の値を尊重するようにタグを設定display:blockする必要がありますa

a:link {
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
    width: 100px;
}