es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo evitar el salto de línea después de un radiobutton, para que vaya a una nueva línea solo con su etiqueta, no por separado?

¿Cómo puedo evitar el salto de línea después de un radiobutton, para que vaya a una nueva línea solo con su etiqueta, no por separado?

12 Jul, 2023 Programación

Tengo un código como este:

<div class="days" style="width:300px;">
<input id="monday" type="radio" name="monday" value="1">
<label for="monday">lunes</label>
<input id="tuesday" type="radio" name="tuesday" value="2">
<label for="tuesday">martes</label>
<input id="wednesday" type="radio" name="wednesday" value="3">
<label for="wednesday">miércoles</label>
<input id="thursday" type="radio" name="thursday" value="4">
<label for="thursday">jueves</label>
</div>

Y aquí está el jsfiddle – https://jsfiddle.net/k96x02qL/

Como puedes ver, para algunos valores de ancho del div principal, a veces se da la situación de que la etiqueta está en una nueva línea, pero el botón de radio no (imagen uno):

picture one

Entonces quiero ver algo como esto (con cualquier valor de ancho del div principal) (imagen dos):

picture two

¿Cómo puedo implementarlo? Por alguna razón, no puedo envolver el input y su etiqueta en un div adicional. Solo puedo agregar algunos estilos usando el atributo html “name” o algo similar…

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para conseguir el resultado deseado de tener la entrada y su etiqueta en la misma línea, podemos usar CSS para estilizar la etiqueta y mostrarla como inline-block, y agregar un margen a la izquierda para crear algún espacio entre la entrada y la etiqueta.

    Aquí está el código actualizado con el CSS necesario:

    <div class="days" style="width:300px;">
  <input id="monday" type="radio" name="days" value="1">
  <label for="monday" style="display:inline-block; margin-left: 5px;">lunes</label>
  <input id="tuesday" type="radio" name="days" value="2">
  <label for="tuesday" style="display:inline-block; margin-left: 5px;">martes</label>
  <input id="wednesday" type="radio" name="days" value="3">
  <label for="wednesday" style="display:inline-block; margin-left: 5px;">miércoles</label>
  <input id="thursday" type="radio" name="days" value="4">
  <label for="thursday" style="display:inline-block; margin-left: 5px;">jueves</label>
</div>

    En este fragmento de código, hemos añadido el atributo de estilo a cada etiqueta y hemos establecido la propiedad de visualización (display) en inline-block para permitir que la entrada y su etiqueta aparezcan en la misma línea. También hemos añadido un margen a la izquierda de 5px para crear algo de espacio entre la entrada y la etiqueta.

    Con este CSS aplicado, las etiquetas y las entradas siempre aparecerán en la misma línea, independientemente del ancho del div contenedor.

Comments are closed.