Cuéntanos qué está pasando:
Hola, me está pidiendo que haga un display inline block en los elementos label e input de .info. Están correctamente escritos (bajo mi criterio) sin embargo me sigue dando error. ¿Qué puede estar pasando?
Gracias
Tu código hasta el momento
ADVERTENCIA
El código semilla del desafío y/o tu solución excedió la longitud máxima que podemos transferir del desafío.
Tendrás que dar un paso adicional aquí para que el código que escribiste se presente en un formato fácil de leer.
Por favor, copia/pega todo el código del editor que se muestra en el desafío desde el que acabas de enlazar.
.info input {
width: 50%;
text-align: left;
display: inline-block;
}
.info label {
width: 10%;
min-width: 55px;
display: inline-block;
text-align: right;
}
Información de tu navegador:
El agente de usuario es: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Desafío: Aprende accesibilidad construyendo un cuestionario - Paso 57
Enlaza al desafío:
Si pones el html podria decirte mejor … de todos modos si input y label tienen una clase .info , bastaria modificar solo la clase a display inline block . Prueba con quitar ese “.info” en el codigo … y si pones tambien el html , te podriamos ayudar mejor, saludos
Tengo el mismo problema que el compañero!!
Dejo aqui el HTML y el CSS.
Haber si entre todos logramos encontrar una solución
HTML:
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
<ul class="answers-list">
<li>
<label for="q1-a1">
<input type="radio" id="q1-a1" name="q1" value="true" />
True
</label>
</li>
<li>
<label for="q1-a2">
<input type="radio" id="q1-a2" name="q1" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label for="q2-a1">
<input type="radio" id="q2-a1" name="q2" value="true" />
True
</label>
</li>
<li>
<label for="q2-a2">
<input type="radio" id="q2-a2" name="q2" value="false" />
False
</label>
</li>
</ul>
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
<div class="formrow">
<div class="question-block">
<label for="customer">Are you a frontend developer?</label>
</div>
<div class="answer">
<select name="customer" id="customer" required>
<option value="">Select an option</option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>
<button type="submit">Send</button>
</form>
</main>
<footer>
CSS:
.info input {
width: 50%;
text-align: left;
display: inline-block;
}
.info label {
width: 10%;
min-width: 55px;
display: inline-block;
text-align: right;
}
Y este es el enunciado del desafio:
Paso 57
To align the input boxes with each other, create a new ruleset that targets all input and label elements within an .info element and set the display property to inline-block.
Alinea también el texto del elemento label a la derecha.
Usa esto:
.info input, .info label{
display: inline-block;
text-align: right;
}