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

Dúvida no exercício do formulário

Olá, no exercício https://cursos.alura.com.br/course/avancando-html-css/task/18742, tive algumas dúvidas:

1) Não entendi a razão de deixar o rótulo dele inline de novo

/* alguns ajustes para o campo "Outro": deixar ele na mesma linha dos outros assuntos */
fieldset > fieldset {
    display: inline;
}

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

2) Qual é a função do width: auto?

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

3) Na parte de outro assunto, o meu código ficou diferente. Como posso incluir o display:inline no meu css ? A resposta do exercício diz:

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

Meu código ficou assim:

 <select name="assunto">
                    <option value="blog">Blog</option>
                    <option value="servico">Serviço</option>
                    <fieldset>
                        <option value="outro">
                            Outro
                            <input type="text" name="outro-assunto" tabindex="1">
                        </option>
                    </fieldset>
                </select>

4) O campo de e-mail ficou maior do que o campo de nome e não encontrei a razão. Código: https://github.com/rruizdasilva/curso_html_css.git (ver html: contato-dropdown e css: contato)

2 respostas
solução!

Oi Roger, tudo bem? Deixa eu tentar te ajudar! Desculpa a ordem, mas fui priorizando por "facilidade" de responder.

4 - No código que baixei e testei, o os campos estavam com o mesmo tamanho:

Imgur

2 - O width: auto vai permitir que o elemento define um tamanho próprio dependendo do seu display. No caso do inline, ele vai ter um tamanho padrão de acordo com seu conteúdo, em casos block, o elemento vai ocupar todo o espaço disponível de seu pai.

3 - Então, nesse caso precisamos fazer o inline no fieldset por que por padrão ele é block, isso possibilita a opção outro ficar lado a lado com os depois assuntos. E esse inline no "outro" é por que antes, todos os labels estavam block, como no nome e no email. Isso ia fazer o input de texto que aparece pro assunto outro ficar abaixo dele e não do lado. Por isso o inline no outro.

1 - Meio que quando respondi o 3, respondi o 1 também.

Deu pra entender melhor agora?

Obrigado pela explicação.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software