html和css代码中的一些问题

Question

I'm trying to code a Calculator interface I'm facing two problems : 1) why these buttons' (.,+) dimensions are not accurate 2) why this code :

 .button { background-color: rgb(81, 122, 121); border: 7px solid rgb(213, 236, 213); color: white; padding: 10px 45px; font-size: 25px; } .button20 { background-color: rgb(36, 117, 117); padding: 15px 32px; text-align: right; width: 285px; height: 45px; } .button19 { padding: 10px 20px; } .style { margin: 0 auto; }

 <div class="button button20">0</div> <div> <button class="button">7</button> <button class="button">8</button> <button class="button">9</button> </div> <div> <button class="button">4</button> <button class="button">5</button> <button class="button">6</button> </div> <div> <button class="button">1</button> <button class="button">2</button> <button class="button">3</button> </div> <div> <button class="button">0</button> <button class="button button12">.</button> <button class="button">±</button> </div> <div> <button class="button button14">×</button> <button class="button">+</button> <button class="button button16">-</button> </div> <div> <button class="button">÷</button> <button class="button">=</button> <button class=" button button19">Clear</button> </div> </div>

Answer 1

Try wrapping the whole thing in a div with display: flex; and removing all the other divs.

Then add extra styling for .button20 so it takes up the whole row.

 .calculator { width: 285px; display: flex; flex-wrap: wrap; } button { background-color: rgb(81, 122, 121); border: 7px solid rgb(213, 236, 213); color: white; padding: 10px; font-size: 25px; flex: 1 0 33.3%; } .button20 { background-color: rgb(36, 117, 117); text-align: right; flex: 0 0 100%; }

 <div class="calculator"> <button class="button20">0</button> <button>7</button> <button>8</button> <button>9</button> <button>4</button> <button>5</button> <button>6</button> <button>1</button> <button>2</button> <button>3</button> <button>0</button> <button>.</button> <button>±</button> <button>×</button> <button>+</button> <button>-</button> <button>÷</button> <button>=</button> <button>Clear</button> </div>

Answer 2

You can fix this by changing your CSS. I have edited your code. This is work as you expect.

 .button { background-color: rgb(81, 122, 121); border: 7px solid rgb(213, 236, 213); color: white; padding: 10px 45px; font-size: 25px; width: 117px !important; } .button20 { background-color: rgb(36, 117, 117); padding: 15px 32px; text-align: right; width: 281px !important; height: 45px; } .button19 { padding: 10px 20px; } .style { margin: 0 auto; }

 <div class="button button20">0</div> <div> <button class="button">7</button> <button class="button">8</button> <button class="button">9</button> </div> <div> <button class="button">4</button> <button class="button">5</button> <button class="button">6</button> </div> <div> <button class="button">1</button> <button class="button">2</button> <button class="button">3</button> </div> <div> <button class="button">0</button> <button class="button button12">.</button> <button class="button">±</button> </div> <div> <button class="button button14">×</button> <button class="button">+</button> <button class="button button16">-</button> </div> <div> <button class="button">÷</button> <button class="button">=</button> <button class=" button button19">Clear</button> </div> </div>

Answer 3

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Calculater interface</title>

.button, .result { background-color: rgb(81, 122, 121); border: 6px solid rgb(213, 236, 213); color: white; font-size: 25px; padding: 5px; }

    .result {
        background-color: rgb(36, 117, 117);
        width: 286px;
    }

    .button {
        width: 100px;
        height: 50px;
    }
</style>



<div class="wrapper">

    <div class="result">0</div>

    <div>

        <button class="button">7</button>

        <button class="button">8</button>

        <button class="button">9</button>

    </div>



    <div>

        <button class="button">4</button>

        <button class="button">5</button>

        <button class="button">6</button>

    </div>

    <div>

        <button class="button">1</button>

        <button class="button">2</button>

        <button class="button">3</button>

    </div>

    <div>

        <button class="button">0</button>

        <button class="button">.</button>

        <button class="button">±</button>

    </div>

    <div>

        <button class="button">×</button>

        <button class="button">+</button>

        <button class="button">-</button>

    </div>

    <div>

        <button class="button">÷</button>

        <button class="button">=</button>

        <button class=" button">Clear</button>

    </div>

</div>

</div>