Как добавить заполнение CSS для кнопки, чтобы она соответствовала ширине столбца?

У меня возникла эта проблема, когда я не могу сделать заполнение кнопки постоянной с шириной столбца. это необходимо для меня, потому что когда пользователь наводит курсор на кнопку, он меняет фон. но если я использую статическое значение для ширины заполнения кнопки, оно будет искажено, когда кто-нибудь увеличит наши два-три уровня. Я пытался использовать значения в виде%, но безрезультатно. помощь будет высоко ценится!

Вы можете легко опробовать мой код на вашем собственном ПК и увидеть, о чем я говорю:

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

заранее спасибо

Источник

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

Источник

Это то, что я бы сделал. Я хотел бы удалить и обновить мой 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;
}
Источник
Другие вопросы по тегам