Question

我有这个问题，我不能使按钮的填充与列宽度不变。这对我来说是必要的，因为当用户将鼠标悬停在按钮上时，它会改变背景。但如果我使用静态值作为按钮填充宽度，一旦任何人放大我们的两个三个级别，它将变形。我试图将值用作％，但无济于事。将非常感谢帮助！

您可以轻松地在自己的电脑上试用我的代码，看看我在说什么：

HTML：

<!DOCTYPE html>

<html>

<head>

    <title>Welcome!</title>
    <!--<link rel="shortcut icon" href="#" />-->
    <link rel="stylesheet" href="styles.css" type="text/css" />

</head>

<body>

    <center>
        <div id="main">
            <div id="header">
            </div>
            <div id="menupane">
                <center><a href="#" class="buttons">Home</a></center>
            </div>
        </div>
    </center>

</body>

</html>

的CSS：

#main
{
    width: 80%;
    height: 590px
}

#header
{
    background-color: #1f3568;
    height: 12%;
}

#menupane
{
    background-color: #cfd3db;
    height: 85%;
    width: 8%;
    float: left;
}

.buttons
{
    color: #1f3568;
    text-decoration: none;
    margin-right: 0px;
    line-height: 40px;
}

.buttons:hover
{
    background-color: #677ba7;
}

提前致谢

Answer 1

将display:block添加到.buttons以填充其父

的宽度

.buttons
{
    display:block;
    text-align:center; // removed CENTER element
    color: #1f3568;
    text-decoration: none;
    margin-right: 0px;
    line-height: 40px;
}

jsFiddle

Answer 2

这就是我要做的。我会删除并更新我的CSS。就像Don说的那样，标签已被弃用。在您的页面上更新此信息，并告诉我这是否是您想要的。

HTML更新：

<div id="menupane">
  <a href="#" class="buttons">Home</a>
</div>

<强> CSS

#menupane
{
    background-color: #cfd3db;
    height: 85%;
    width: 20%;
    float: left;
}

a.buttons
{
    display:block;
    color: #1f3568;
    text-decoration: none;
    margin: 0px;
    line-height: 40px;
}

a.buttons:hover
{
    background-color: #677ba7;
}

如何为按钮添加css填充，使其与列宽一致？

2 个答案:

jsFiddle