0

ボタンのパディングを列幅で一定にできないというこの問題が発生しています。ユーザーがボタンにカーソルを合わせると背景が変わるため、私にとって必要です。しかし、ボタンのパディング幅に静的な値を使用すると、誰かが 2 つの 3 つのレベルをズームインすると歪んでしまいます。値を % として使用しようとしましたが、役に立ちませんでした。助けていただければ幸いです！

自分の PC で私のコードを簡単に試してみて、私が話していることを確認してください。

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

jsフィドル

于 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 に答える