Тема: Квадратні кнопки які автоматично регулюються по ширині

Я хочу створити квадратні кнопки які автоматично регулюються по ширині для цього в #buttons input я  використав  width: 10%; але що написати для height ?
#buttons це <div id="buttons"> в якому кнопки і мають бути

 
#buttons
{
    width: 40%;
    height: 300px;
}

#buttons input
{
    width: 10%;
    height: 50px;
}

2

Re: Квадратні кнопки які автоматично регулюються по ширині

Код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    #buttons{
        width:50%;
    }
    #buttons a{
        display:block;
        background: red;
        color:#fff;
        width:10%;
        line-height:33px;
        /*padding:15px 0;*/
        text-decoration: none;
        text-align: center;
    }
</style>
<body>
    <div id="buttons">
        <a href="#">Learn more</a>
    </div>
</body>
</html>

1. input використовуй за призначенням.
2. спробуй верстати без height.
3. line-height:33px; або /*padding:15px 0;*/ залежить від ситуації

Chemist-i: код слід брати у теґ code, довгі коди слід ховати під спойлер.

Подякували: Djalin, Betterthanyou2

3

Re: Квадратні кнопки які автоматично регулюються по ширині

#buttons {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    background: red;
}

http://stackoverflow.com/questions/6693 … o-viewport

Подякували: Betterthanyou1