Estou no curso HTML5 e CSS3 II, no capítulo Formulários e atividade Estilizando formulários.
Estou tentando colocar o botão para a direita da tela, como o exercício pede, mas ele sempre fica na esquerda.
A resposta do exercício diz que o seguinte código funcionaria:
/* Faz com que o botão apareça na direita */
margin-left: auto;
margin-top: 1em;Mas não funcionou. Então uma das soluções que deram a um outro aluno que teve o mesmo problema que eu, foi de usar "display: block;" no seletor do botão, mas também não funcionou comigo.
O pai do "button" não seria o "form"? Tenho que alterar algo no css do "form"?
Vou postar os trechos de código relevantes abaixo.
HTML:
[...]
<body>
<main>
<h1 class="titulo-principal">Contato</h1>
<div class="container">
<form>
<fieldset class="dados-pessoais">
<legend> Dados Pessoais</legend>
<label for="nome">Nome:</label>
<input id="nome-contato" name="nome-contato"
placeholder="Seu nome aqui" pattern="[A-Za-z ']{4,}" title="Somente letras (mín 4)"
autofocus required>
<label for="email-contato">Email:</label>
<input id="email-contato" name="email-contato" placeholder="seu@email.com" type="email" required>
</fieldset>
<fieldset class="assunto">
<legend> Assunto</legend>
<label>
<input type="radio" name="assunto" value="blog">
Blog
</label>
<label>
<input type="radio" name="assunto" value="servicos">
Serviço
</label>
<input id="outro" type="radio" name="assunto" value="outro">
<label for="outro">Outro</label>
<input type="text" name="outro">
</fieldset>
<label for="msg">Mensagem:</label>
<textarea id="msg" name="mensagem" placeholder="Digite aqui sua mensagem" required></textarea>
<button type="submit">Enviar mensagem</button>
</form>
</div>
</main>
[...]
</body>CSS:
main{
padding-bottom: 5em;
}
legend,
label[for="msg"]{
font-weight: bold;
padding-top: 1em;
}
label[for]{
display: block;
}
label[for="outro"] {
display: inline;
}
.dados-pessoais input,
textarea{
font-family: inherit;
width: 100%;
border: 1px solid #ccc;
padding: .25em .5em;
font-size: 100%;
box-sizing: border-box;
}
textarea{
height: 30ch;
}
fieldset > fieldset {
display: inline;
}
input:focus,
textarea:focus{
background-color: #FFD;
}
input:invalid{
box-shadow: 0px 0px 3px red;
}
button{
color: #F2FFFC;
background-color: #3C1D3D;
padding: .5em 1em;
font-family: "Open Sans Condensed", "Arial", sans-serif;
font-size: 1.2em;
border: none;
position: absolute;
margin-left: auto;
margin-top: 1em;
display: block;
cursor: pointer;
}
button:hover,
button:focus {
background-color: #8C1D3D;
}
.assunto input[type="text"]{
display: none;
}
.assunto input[id="outro"]:checked ~ input[type="text"] {
display: inline-block;
}