0

我遇到了这个问题，我无法使按钮的填充与列宽保持一致。这对我来说是必要的，因为当用户将鼠标悬停在按钮上时，它会改变背景。但是如果我对按钮填充宽度使用静态值，一旦有人放大我们的两个三个级别，它就会失真。我尝试将这些值用作 %，但无济于事。帮助将不胜感激！

你可以很容易地在你自己的电脑上试用我的代码，看看我在说什么：

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

提前致谢

4

2 回答 2

2

添加display:block到.buttons填充其父级的宽度

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

jsFiddle

于 2013-06-27T02:37:15.923 回答
0

这就是我会做的。我会删除并更新我的 CSS。就像唐说的那样，该标签已被弃用。在您的页面上更新此内容，让我知道这是否是您想要的。

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;
}
于 2013-06-27T02:56:13.480 回答