Как я могу подключить кнопки? - PullRequest
Новая
       15

Как я могу подключить кнопки?

0 голосов
/ 27 февраля 2020

Я пытаюсь сделать калькулятор, используя HTML, CSS и Javascript. Это просто необработанные CSS и HTML. Пожалуйста, как мне сделать так, чтобы все границы кнопок совпадали, так как я использовал flex grow.

РЕДАКТИРОВАТЬ: Я сожалею о старой ссылке на кодовое перо, это новая и рабочая https://codepen.io/philippaolomoro/pen/abOwoNd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Calculator using flex</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <section class="screen-container">
            <div class="screen-input">
                0
            </div>
        </section>
        <section class="buttons">
            <div class="rows row1">
                <button class="clear">C</button>
                <button>&#8592;</button>
                <button>&divide;</button>
            </div>
            <div class="rows row2">
                <button>7</button>
                <button>8</button>
                <button>9</button>
                <button>x</button>
            </div>
            <div class="rows row3">
                <button>4</button>
                <button>5</button>
                <button>6</button>
                <button>-</button>
            </div>
            <div class="rows row4">
                <button>1</button>
                <button>2</button>
                <button>3</button>
                <button>+</button>
            </div>
            <div class="rows row5">
                <button class="zero">0</button>
                <button>=</button>
            </div>
        </section>
    </div>
</body>
</html>

РЕДАКТИРОВАТЬ: Мой CSS находится в моем коде ссылки пера.

Ответы [ 3 ]

1 голос
/ 29 февраля 2020

Я бы посоветовал вам использовать сетку вместо flexbox, она идеально подходит для вашей ситуации. 

.rows {
display:grid;
grid-template-columns: repeat(4,1fr) 
}

.clear {
grid-column: 1/3
}

.zero {
grid-column: 1/4
}

Подробнее о сетке css вы можете прочитать здесь: CSS GRID

0 голосов
/ 27 февраля 2020

Ваша кодовая ссылка не работает. Однако одно из возможных решений - установить ширину для ваших строк и добавить свойство flex-grow к последней кнопке каждой строки: 

<style>
    .rows{
        display: flex;
        width: 100px;
    }
    .rows button:last-of-type{
        flex-grow: 1;
    }
</style>
0 голосов
/ 27 февраля 2020

Если вы дадите font-size 0 родительскому элементу, он должен удалить пробелы между вашими кнопками, что приведет к появлению дополнительного пространства между ними.

Добавьте следующее к вашему css: 

.buttons{
    font-size: 0;
}
...