Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Substituição do "margin" pelo "position" no button

Aloquei o botão como pedia o exercício usando "position: relative" no "form" e "position: absolute" no "button" atribuindo o valor 0 às propriedades "bottom" e "right"(conforme demonstrado no código). Gostaria de saber se existe algum prejuízo nessa forma de solução no que se refere à versatilidade ou resiliência.

legend,
label[for="mensagem"] {
    font-weight: bold;
    margin-top: 1em;
}

label[for] {
    display: block;
}

input[type="text"],
input[type="email"],
textarea {
    /* Força o navegador a usar a mesma fonte da página */
    font-family: inherit;
    /* Inclusive o tamanho dela */
    font-size: 100%;
    padding: .25em .5em;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

form{
    position: relative;
    padding-bottom: 4em;
}

fieldset > fieldset {
    display: inline;
}

/* deixar o rótulo dele inline de novo */
label[for="outro"] {
    display: inline;
}

/* deixar só esse campo sem ocupar a tela toda */
input[name="outro-assunto"] {
    width: auto;
}

input:focus,
textarea:focus {
    background-color: #FFD;
}

input:invalid {
    box-shadow: 0 0 3px red;
}

button {
    /* Precisamos tirar a borda que o navegador coloca por padrão */
    border: 0;
    padding: .5em 1em;
    font-family: "Open Sans Condensed", sans-serif;
    background-color: #3C1D3D;
    color: white;
    font-size: 1.2em;
    /* Faz com que o botão apareça na direita*/
    /*margin-left: auto;
    margin-top: 1em;
    display: block;*/
    position: absolute;
    bottom: 0;
    right: 0;
}

button:hover,
button:focus {
    background-color: #8C1D3D;
}

No mais, gostaria de entender melhor a solução descrita para o posicionamento do botão usando "margin". Pelo que pude perceber através de testes que fiz, o "margin-left" não promove mudança substancial já que o margeamento verificado no console é nulo à esquerda(não sei se essa é justamente a função do atribuir "auto" à essa propriedade e eu não havia entendido até agora) e, no final das contas, o comando que promove o posicionamento do botão à direita é o "display: block". Por enquanto, são minhas impressões. Gostaria de entender melhor a lógica por trás dessas duas linhas de comando no css.

3 respostas

Fala aí Edson, beleza? Existe N soluções para esse problema, no caso, o botão está com position: absolute, dessa maneira, sua posição será baseada no componente pai mais próxima que tenha outro position, no caso o forma que está com position; relative.

O bottom e right com o valor 0 servem para dizer que ele deve ficar sempre no canto direito e na parte inferior.

Espero ter ajudado.

Então, essa foi a solução que propus. Na verdade gostaria de saber se existe algum prejuízo em optar por ela..

O que eu queria que fosse explicado é a solução usando o "margin-left:auto" e o "display:block", especialmente a lógica por trás dessas duas linhas de comando..

Grato.

solução!

Existe N maneiras de realizar esse layout, eu particularmente evito utilizar position, em alguns momentos pode ter problema para responsividade.

Uma outra solução, seria ter uma div para funcionar como uma row e dentro dela adicionar o botão:

<div> class="row">
    <button>Meu botão</button>
</div>

Dai na div fazemos o alinhamento para a direita:

.row {
    text-align: right;
}

Espero ter ajudado.