围绕链接的等长背景框：a：悬停

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