Czemu każdy button ma inne wymiary?

Question

Zrobiłem buttony ale każdy ma inne wymiary. Co zrobić, aby każdy był taki sam?

     .button{
    display: block;
    width: 80px;
    height: 50px;
    background-color: inherit;
}

<div class="button">
        
    <a href="index.html"><button type="button" style="background-color: red;">Bruce wszechmogący</button></a><br>

    <a href="trumanshow.html"><button type="button" style="background-color: red;">Truman show</button></a><br>

<a href="klamcaklamca.html"><button type="button" style="background-color: red;">Kłamca kłamca</button></a><br>

<a href="garfield.html"><button type="button" style="background-color: red;">Garfield</button></a><br>

<a href="swiatwedlugkiepskich.html"><button type="button" style="background-color: red;">Świat według Kiepskich</button></a><br>

<a href="dzis13jutro30.html"><button type="button" style="background-color: red;">Dziś 13 jutro 30</button></a><br>

<a href="klikirobiszcochcesz.html"><button type="button" style="background-color: red;">Klik i robisz co chcesz</button></a><br>

<a href="maly.html"><button type="button" style="background-color: red;">Mały</button></a><br>

<a href="rodzinka_pl.html"><button type="button" style="background-color: red;">Rodzinka.pl</button></a><br>
        
        </div>

 

Answer 1

Usuń kropeczkę sprzed button (css). Z kropką masz klasę, a ty stylizujesz element. chyba, ze dodasz klasę do tego elementu to wtedy też zadziała. Po prostu twoja reguła nie odnosi się do niczego.

 

EDIT:
ok teraz jeszcze zauważyłem, że to wszystko jest w divie o klasie button. No to po prostu stylizujesz tą regułą tego diva a nie elementy w nim. Mało reguł jest dziedziczonych od rodzica.

Answer 2

Z prostego powodu - 

<a href="rodzinka_pl.html"><button type="button" style="background-color: red;">Rodzinka.pl</button></a>

powinno być

<input type="button" class="button" value="nazwa">test</input>