0

Estoy desarrollando la siguiente interfaz introducir la descripción de la imagen aquí

pero como podrán notar, el texto se posiciona en la parte de abajo de cada checkbox, entonces es algo raro ya que por default debería ponerse a un lado, esto lo estoy pintando desde javascript, pero el resultado final en el navegador es el siguiente código HTML:

<div class="span10" id="divContent2"><br>
                <div id="DivCheckPregunta" style="width: 100%; text-align: right;"></div>
                    <div id="txtPregunta" style="color: black; padding-right: 30px; padding-left: 30px; font-size: 18px; font-weight: bold;">
                      <p><span size="5" color="#444444">Tres valores que debe estar configurado para permitir que un PC para conectarse con una red? (Elija 3)</span></p></div><br><br><br>                    
                <div id="divRespuestasSugeridad_Pregunta" style="color: black; padding-left: 30px;">
                    <div style="padding-right: 30px; padding-bottom: 20px;" onchange="AplicacionEncuestas.ClicEnRespuestaMultipleVariasRespuestas(472, 153)">
<input name="rbRespuesta" id="rbRespuesta472" type="checkbox"> Dirección IP
                    </div>

                    <div style="padding-right: 30px; padding-bottom: 20px;" onchange="AplicacionEncuestas.ClicEnRespuestaMultipleVariasRespuestas(473, 153)">
<input name="rbRespuesta" id="rbRespuesta473" type="checkbox"> Dirección de&nbsp;MAC
                    </div>

                    <div style="padding-right: 30px; padding-bottom: 20px;" onchange="AplicacionEncuestas.ClicEnRespuestaMultipleVariasRespuestas(474, 153)">
<input name="rbRespuesta" id="rbRespuesta474" type="checkbox"> Máscara
                    </div>

                    <div style="padding-right: 30px; padding-bottom: 20px;" onchange="AplicacionEncuestas.ClicEnRespuestaMultipleVariasRespuestas(475, 153)">
<input name="rbRespuesta" id="rbRespuesta475" type="checkbox"> Puerta de Enlace
                    </div>
                    <div style="padding-right: 30px; padding-bottom: 20px;" onchange="AplicacionEncuestas.ClicEnRespuestaMultipleVariasRespuestas(476, 153)">
    <input name="rbRespuesta" id="rbRespuesta476" type="checkbox"> Direcciones de correo</div>
                </div>
            </div>

De hecho lo he probado en editores de código en línea y se ajusta correctamente Codepen: Formulario

Habria alguna manera de ajustarlos con puro css?

2 respuestas 2

0

Puedes solucionarlo encerrando esos textos en párrafos y luego quitándoles el margin por defecto, en este caso lo he dejado en 0px, pero puedes ponerle el margin que te acomode más:

aquí el codepen.

Y el código:

<div class="span10" id="divContent2"><br>
                <div id="DivCheckPregunta" style="width: 100%; text-align: right;"></div>
                    <div id="txtPregunta" style="color: black; padding-right: 30px; padding-left: 30px; font-size: 18px; font-weight: bold;">
                      <p><span size="5" color="#444444">Tres valores que debe estar configurado para permitir que un PC para conectarse con una red? (Elija 3)</span></p></div><br><br><br>                    
                <div id="divRespuestasSugeridad_Pregunta" style="color: black; padding-left: 30px;">
                    <div style="padding-right: 30px; padding-bottom: 20px;" onchange="AplicacionEncuestas.ClicEnRespuestaMultipleVariasRespuestas(472, 153)">
<input name="rbRespuesta" id="rbRespuesta472" type="checkbox"> <p style="margin-top:0px">Dirección IP</p>
                    </div>

                    <div style="padding-right: 30px; padding-bottom: 20px;" onchange="AplicacionEncuestas.ClicEnRespuestaMultipleVariasRespuestas(473, 153)">
<input name="rbRespuesta" id="rbRespuesta473" type="checkbox"> <p style="margin-top:0px">Dirección de&nbsp;MAC</p>
                    </div>

                    <div style="padding-right: 30px; padding-bottom: 20px;" onchange="AplicacionEncuestas.ClicEnRespuestaMultipleVariasRespuestas(474, 153)">
<input name="rbRespuesta" id="rbRespuesta474" type="checkbox"> <p style="margin-top:0px">Máscara</p>
                    </div>

                    <div style="padding-right: 30px; padding-bottom: 20px;" onchange="AplicacionEncuestas.ClicEnRespuestaMultipleVariasRespuestas(475, 153)">
<input name="rbRespuesta" id="rbRespuesta475" type="checkbox"> <p style="margin-top:0px">Puerta de Enlace</p>
                    </div>
                    <div style="padding-right: 30px; padding-bottom: 20px;" onchange="AplicacionEncuestas.ClicEnRespuestaMultipleVariasRespuestas(476, 153)">
    <input name="rbRespuesta" id="rbRespuesta476" type="checkbox"> <p style="margin-top:0px">Direcciones de correo</p></div>
                </div>
            </div>

Por cierto, creo que el texto instructivo debería decir:

Marque tres valores que deben estar configurados para permitir que un PC se conecte a una red.

Espero haberte ayudado.

0

No necesitas nada de CSS en principio para ajustar el texto, puedes hacerlo con una etiqueta label en cada input.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <input id="prueba" name="direccion" type="checkbox">
  <label for="prueba">Direccion ip</label>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.