• Звідки: Київ
  • Дата реєстрації: 16.05.2014
  • Повідомлень: 1 695
    • Репутація: 1022

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

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

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

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

Betterthanyou вебсайт

2 Відповідь від Key

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

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 Відповідь від koala

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 603
    • Репутація: 13312

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

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

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

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

koala вебсайт