Text below checkbox

Question

Text below checkbox

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I am developing the following interface

but as you can see, the text is positioned at the bottom of each checkbox, so it's a bit strange since by default it should be set aside, I'm painting it from javascript, but the final result in the browser is the following HTML code:

<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>

In fact I have tested it on online code editors and it fits correctly Codepen: Form

Would there be any way to adjust them with pure css?

javascript html5

asked by José MN 25.05.2017 в 02:27

source

2 answers

take query sql [duplicated] Syntax to remove the privilege of a user from a stored procedure?

score 0 · Answer 1

You can solve it by enclosing those texts in paragraphs and then removing the margin by default, in this case I have left it in 0px, but you can put the margin that suits you most:

here the codepen .

And the code:

<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>

By the way, I think the instructional text should read:

Mark three values that must be configured to allow a PC to connect to a network.

I hope I have helped you.

score 0 · Answer 2

You do not need any CSS in principle to adjust the text, you can do it with a label label in each 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>