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;
}