1
resposta

Radio não esta correto (bolinha de seleção no lugar errado)

Boa tarde, Estou revisando cod e não estou encontrando o erro, meu radio não esta alinhado, mesmo eu utilizando o "input-padrao"

resutado

Código HTML

    <main>
            <form>
                <label for = "nomesobrenome">Nome e sobrenome</label>
                <input type = "text" id="nomesobrenome" class="input-padrao">

                <label for="email">E-mail</label>
                <input type = "text" id="email" class="input-padrao">

                <label for="telefone">Telefone</label>
                <input type="text" id="telefone" class="input-padrao">

                <label for="mensagem">Mensagem</label>
                <textarea cols="70" rows="10" id="mensagem" class="input-padrao"></textarea>

                <div>
                    <p>Como prefere o nosso contato?</p>
                    <label for="radio-email"><input type="radio" name="contato" value="email" id="radio-email">Email</label>

                    <label for="radio-telefone"><input type="radio" name="contato" value="telefone" id="radio-telefone">Telefone</label>

                    <label for="radio-whatsapp"><input type="radio" name="contato" value="whatsapp" id="radio-whatsapp">WhatsApp</label>

                </div>

                <div>
                    <p>Qual horário prefere ser atendido?</p>
                    <select>
                        <option>Manhã</option>
                        <option>Tarde</option>
                        <option>Noite</option>
                    </select>
                </div>

                <label class="checkbox">
                    <input type="checkbox">
                    Gostaria de receber nossas novidades por email?
                </label>

                <input type = "submit" value="Enviar formulário">
            </form>
        </main>
código CSS
    form label {
    display:block;
    font-size: 20px;
    margin: 0 0 10px;
    }
form label, form p {
    display:block;
    font-size: 20px;
    margin: 0 0 10px;
}
form input {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}
.input-padrao {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}
.checkbox {
    margin: 20px 0;
}
1 resposta

Oi, Ramon. Tudo bom? Então, eu vejo que no CSS você declarou duas vezes o "form label {}". De qualquer forma, esse não é de fato o problema. Para deixar alinhado, sugiro atualizar essa parte do html, substituindo a

por conforme modelo a seguir:
<fieldset>
                    <legend>Como prefere nosso contato?</legend>
                    <label for="radio-email"> <input type="radio" name="contato" value="email" id="radio-email"> Email</label>


                    <label for="radio-telefone"> <input type="radio" name="contato" value="Telefone" id="radio-telefone"> Telefone</label>


                    <label for="radio-wpp"> <input type="radio" name="contato" value="WhatsApp" id="radio-wpp" checked> WhatsApp</label>

</fieldset>

                <fieldset>
                    <legend>Qual horário pretende ser atendido?</legend>
                    <select>
                        <option> Manhã</option>
                        <option>Tarde</option>
                        <option>Noite</option>
                    </select>
                </fieldset>

E para o CSS, você pode retirar a form input{} e deixar apenas a .input-padrao{} adicionando essas a seguir observe que ao invés da tag de parágrafo dentro da form, o professor sugere usar a "legend" no lugar da "p":

form{
    margin: 40px 0;
}

form label, form legend{
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}