-1

Ao adicionar uma letra no value, o botão aumenta para se adequar e desfigura todo o alinhamento. Sei quem com tabelas seria mais fácil e melhor, mas quero fazer funcionar com botões

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>GAM</title>
    <style type="text/css" >
    .modif{
        margin: 2px;
        padding: 5%;
        font-size: 10px;





        text-align: center;
        color: black;
        border: 3px solid #4F4F4F;
        border-radius: 6%;
    }
    .modif:hover {
        background-color:   #4F4F4F; 
        color: white;
}
    .velha{
        margin-left: 40.6%;
        margin-top: 1%;
    }
    .novoj{
        padding: 1%;
        font-family: verdana;
        font-size: 100%;
        margin-left: 7%;
        border-radius: 5px;
        border-color: #4F4F4F;
        font-family: 'Press Start 2P', cursive;
    }
    .novoj:hover {
        background-color:   #CD950C; 
        color: white;
}
    h3{
        margin-left: 1.5%;
        font-family: 'Press Start 2P', cursive;
    }

    </style>
</head>
<body>
 <div class="velha">  

    <input class="modif" type="button" value="x" /><input class="modif" type="button" value=""/><input class="modif" type="button" value=""/><br/>
    <input class="modif" type="button" value=""/><input class="modif" type="button" value=""/><input class="modif" type="button" value=""/><br/>
    <input class="modif" type="button" value=""/><input class="modif" type="button" value=""/><input class="modif" type="button" value=""/><br/>

    <br><input type="button" class="novoj" value="New" onclick="RELOAD();" />
</div>

<script>
</script>
</body>
</html>
2
  • Você zerou margin e padding antes de começar a estilizar?
    – vicckm
    16/10/2019 às 18:49
  • Ao adicionar 1 letra ao botão, ele se expande e desfigura tudo prntscr.com/pk87pg . Mesmo com padding e margin zerados que não é o caso do print ...
    – LeonardoV
    16/10/2019 às 18:58

2 Respostas 2

1

Você não está definindo tamanho de nada ai no teu código, pois você precisa definir o width pra ter a largura e/ou height para altura. Supondo que você queira definir a largura de todos os botões com base na sua class ficaria mais ou menos assim:

.modif{
    margin: 2px;
    padding: 5%;
    font-size: 10px;
    width: //aqui vc define a largura que quer (px, %, etc.);
    height: //aqui vc define a altura que quer (px, %, etc.);
    text-align: center;
    color: black;
    border: 3px solid #4F4F4F;
    border-radius: 6%;
}

Tenha em mente que a alteração será para TODOS os botões que tem a class modif. Se quiser para algum específico crie um ID para cada um e defina na própria tag com style.

5
  • Eu já tentei definir tamanho e zerar margin e padding ou definir tamanho e manter os dois, porém, quando adiciono uma letra dentro do botão ele aumenta e bagunça o layout. Eu preciso que o botão fique com tamanho fixo mesmo quando adiciono letras dentro, OBS: já tentei usar "max-width", COD: prntscr.com/pk89wb Img: prntscr.com/pk8btb
    – LeonardoV
    16/10/2019 às 19:05
  • estranho era pra funcionar, esse é todo o seu código ou tem mais alguma coisa que você acha que pode impactar na mudança do CSS? Tente colocar o widht diretamente na tag e verifique o que da 16/10/2019 às 19:10
  • Esse é todo o cod: dropbox.com/s/id7hqn3825no1au/forum.html?dl=0
    – LeonardoV
    16/10/2019 às 19:19
  • Consegui resolver seu problema com javascript. Você precisa usar float:left onde tem valor setado no botão. Por exemplo, nesta linha fiz o seguinte: <input class="modif" type="button" value="x" style="float: left;" id="btn-1"/> Você pode fazer via JS o seguinte: if($('#btn-1').val() != null || $('#btn-1').val() != ""){ $('#btn-1').css('float','left'); } Comigo deu certo! 16/10/2019 às 19:42
  • Solução complexa, mas funciona muito bem ! Obg, tu é o cara !!!
    – LeonardoV
    16/10/2019 às 20:17
0

Isso é um problema tipográfico, os elementos inline tem um tipo específico de alinhamento e para que um elemento sem texto e com text se alinhem igual vc precisa definir um vertical-aligment

inserir a descrição da imagem aqui

Porém como vc pode ver na imagem, o X ocupa um espaço, poie é um caractere de texto.

.modif {
    margin: 2px;
    padding: 5%;
    font-size: 10px;

/* isso vai fazer todos os btns ficarem alinhados pelo base-line da altura x*/
vertical-align: bottom;


    text-align: center;
    color: black;
    border: 3px solid #4F4F4F;
    border-radius: 6%;
}

.modif:hover {
    background-color: #4F4F4F;
    color: white;
}

.velha {
    margin-left: 40.6%;
    margin-top: 1%;
}

.novoj {
    padding: 1%;
    font-family: verdana;
    font-size: 100%;
    margin-left: 7%;
    border-radius: 5px;
    border-color: #4F4F4F;
    font-family: 'Press Start 2P', cursive;
}

.novoj:hover {
    background-color: #CD950C;
    color: white;
}

h3 {
    margin-left: 1.5%;
    font-family: 'Press Start 2P', cursive;
}
<div class="velha">

    <input class="modif" type="button" value="x" /><input class="modif" type="button" value=" " /><input class="modif" type="button" value=" " /><br />
    <input class="modif" type="button" value=" " /><input class="modif" type="button" value="" /><input class="modif" type="button" value="" /><br />
    <input class="modif" type="button" value="" /><input class="modif" type="button" value="" /><input class="modif" type="button" value="" /><br />

    <br><input type="button" class="novoj" value="New" onclick="RELOAD();" />
</div>


Corrigindo o value vazio

Então se vc quiser que fiquem todos alinhados, vc tem que deixar o value vazio, não assim value="", mas tem que deixar assim value=" " mesmo um espaço vazio renderiza na tela e ele é o suficiente para manter tudo alinhado. Mesmo assim não fica totalmente perfeito pq a largura de um X é diferente da largura de um (espaço vazio)

inserir a descrição da imagem aqui

.modif {
    margin: 2px;
    padding: 5%;
    font-size: 10px;

/* isso vai fazer todos os btns ficarem alinhados pelo base-line da altura x*/
vertical-align: bottom;


    text-align: center;
    color: black;
    border: 3px solid #4F4F4F;
    border-radius: 6%;
}

.modif:hover {
    background-color: #4F4F4F;
    color: white;
}

.velha {
    margin-left: 40.6%;
    margin-top: 1%;
}

.novoj {
    padding: 1%;
    font-family: verdana;
    font-size: 100%;
    margin-left: 7%;
    border-radius: 5px;
    border-color: #4F4F4F;
    font-family: 'Press Start 2P', cursive;
}

.novoj:hover {
    background-color: #CD950C;
    color: white;
}

h3 {
    margin-left: 1.5%;
    font-family: 'Press Start 2P', cursive;
}
<div class="velha">

    <input class="modif" type="button" value="x" /><input class="modif" type="button" value=" " /><input class="modif" type="button" value=" " /><br />
    <input class="modif" type="button" value=" " /><input class="modif" type="button" value=" " /><input class="modif" type="button" value=" " /><br />
    <input class="modif" type="button" value=" " /><input class="modif" type="button" value=" " /><input class="modif" type="button" value=" " /><br />

    <br><input type="button" class="novoj" value="New" onclick="RELOAD();" />
</div>

2
  • Estava muito perdido achando que era problema de display e varias outras coisas ... Ajudou-me mto, obg pela explicação.
    – LeonardoV
    16/10/2019 às 20:27
  • @RtxLéo legal que ajudou ai, era mais simples do que parecia né, o value é um "texto" que renderiza dentro do elemento, esse texto tem largura, altura e outras propriedade basicas, diferente de um elemento sem texto dentro, então vc tem que definir manualmente um valor padrão para quem tem ou não tem texto dentro, basicamente isso. Inclusive se vc trocar vertical-align: bottom; por vertical-align: top; também vai dar certo rss :D, pois vc declarou um alinhamento para todos, tendo ou não texto dentro.
    – hugocsl
    16/10/2019 às 20:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .