3

Lo que quiero es que los input que hay en la parte derecha no estén unos más a la izquierda o a la derecha que otros. No me importa si es necesario usar css o si simplemente es una tag del div.

<div name="dinero">
			<div name="monedas">
				<label>Monedas de 1 cent: </label>
				<input id="1" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Monedas de 2 cents: </label>
				<input id="2" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Monedas de 5 cents: </label>
				<input id="5" type="number" min="0" value="0" onchange="sumar()">
					<br>	
					<br>
				<label>Monedas de 10 cents: </label>
				<input id="10" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Monedas de 20 cents: </label>
				<input id="20" type="number" min="0" value="0" onchange="sumar()">
					<br>	
					<br>
				<label>Monedas de 50 cents: </label>
				<input id="50" type="number" min="0" value="0" onchange="sumar()">
					<br>	
					<br>
				<label>Monedas de 1 euro: </label>
				<input id="100" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Monedas de 2 euros: </label>
				<input id="200" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Monedas de 30 euros: </label>
				<input id="3000" type="number" min="0" value="0" onchange="sumar()">
					<br>
			</div>
			<div id="billetes">
					<br>
				<label>Billetes de 5 euros: </label>
				<input id="500" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Billetes de 10 euros: </label>
				<input id="1000" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Billetes de 20 euros: </label>
				<input id="2000" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Billetes de 50 euros: </label>
				<input id="5000" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Billetes de 100 euros: </label>
				<input id="10000" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Billetes de 200 euros: </label>
				<input id="20000" type="number" min="0" value="0" onchange="sumar()">
					<br>
			</div>
		</div>

8
  • 2
    hola hugo has tratado de trabajar con bootstrap o materialize???
    – ger
    Commented el 2 ene. 2019 a las 16:47
  • @ger, justo iba a decir lo mismo. Hugo Galingo Lorenzo, existen bastantes frameworks y librerías que puedes aplicar a este problema que tienes. Commented el 2 ene. 2019 a las 16:48
  • sinceramente no, pero quiero una solución simple y sencilla. Sin complicarme mucho.
    – Clipi
    Commented el 2 ene. 2019 a las 16:49
  • @HugoGalindoLorenzo precisamente bootstrap es simple o sencilla :D XD
    – ger
    Commented el 2 ene. 2019 a las 16:50
  • ok, pues como se usa :) ya he dicho que hace mucho (años) que no programo (solo me acuerdo de lo básico de javascript y html)
    – Clipi
    Commented el 2 ene. 2019 a las 16:51

2 respuestas 2

4

Esta es una de las posibles soluciones que mencioné con el tag table de html

        <table>
            <tr>
                <td><label>Monedas de 1 cent: </label></td>
                <td><input id="1" type="number" min="0" value="0" onchange="sumar()"></td>
            </tr>
            <tr>
                <td><label>Monedas de 2 cents: </label></td>
                <td><input id="2" type="number" min="0" value="0" onchange="sumar()"><td>
            </tr>
            <tr>
                <td> <label>Monedas de 5 cents: </label>  </td>
               <td> <input id="5" type="number" min="0" value="0" onchange="sumar()"></td>
            </tr>
<!-- el resto de tu codigo -->
        </table>

7
  • 1
    he terminado el código antes que tú ^-^ Pero por supuesto te marco como correcta la respuesta ya que la idea ha sido tuya. :)
    – Clipi
    Commented el 2 ene. 2019 a las 17:05
  • @ger, te llevaste el premio (y). Commented el 2 ene. 2019 a las 17:06
  • @GianFrancoAlexisPomaVidal : "> creo que es mejor las cosas mas sencillas.. ; ">
    – ger
    Commented el 2 ene. 2019 a las 17:08
  • @ger, efectivamente. Commented el 2 ene. 2019 a las 17:14
  • Esta respuesta es realmente una mala idea, las tablas NO fueron diseñadas para generar layouts o para dar estilo, va en contra de las buenas prácticas de HTML.
    – Shaz
    Commented el 2 ene. 2019 a las 17:15
4

La respuesta aceptada es una mala práctica y una pésima aplicación de las tablas HTML, y no debe ser aplicada en ningún contexto. Aquí la sustentación:

Las tablas de HTML existen para tabular información, no para dar estilo, al pretender «dar estilo» o generar la estructura con tablas, se está dañando toda la semántica del sitio, se complica a futuro las mejoras del mismo, no va a funcionar bien en todos los dispositivos y por último y tal vez lo más importante, se está afectando la accesibilidad (personas con discapacidad). Esto no es nuevo, es una mala práctica desde hace ya varios años, desde la década pasada.


Mi respuesta/solución:

En cuanto a si debes utilizar CSS o no, la respuesta es: Sí, debes usar CSS, HTML no ofrece estilos, y en el fondo cuando no utilizas estilos, los resulta asignando el navegador (estilos predeterminados).

Teniendo en cuenta que dices que no deseas utilizar ningún framework, lo más sencillo podría ser hacer que <label> sea un elemento inline-block y asignarle un ancho fijo. El único «problema» sería el responsive, para lo cual tendrías que aplicar media queries.

label {
  display: inline-block;
  width: 20%;
}
<div name="dinero">
			<div name="monedas">
				<label>Monedas de 1 cent: </label>
				<input id="1" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Monedas de 2 cents: </label>
				<input id="2" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Monedas de 5 cents: </label>
				<input id="5" type="number" min="0" value="0" onchange="sumar()">
					<br>	
					<br>
				<label>Monedas de 10 cents: </label>
				<input id="10" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Monedas de 20 cents: </label>
				<input id="20" type="number" min="0" value="0" onchange="sumar()">
					<br>	
					<br>
				<label>Monedas de 50 cents: </label>
				<input id="50" type="number" min="0" value="0" onchange="sumar()">
					<br>	
					<br>
				<label>Monedas de 1 euro: </label>
				<input id="100" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Monedas de 2 euros: </label>
				<input id="200" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Monedas de 30 euros: </label>
				<input id="3000" type="number" min="0" value="0" onchange="sumar()">
					<br>
			</div>
			<div id="billetes">
					<br>
				<label>Billetes de 5 euros: </label>
				<input id="500" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Billetes de 10 euros: </label>
				<input id="1000" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Billetes de 20 euros: </label>
				<input id="2000" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Billetes de 50 euros: </label>
				<input id="5000" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Billetes de 100 euros: </label>
				<input id="10000" type="number" min="0" value="0" onchange="sumar()">
					<br>
					<br>
				<label>Billetes de 200 euros: </label>
				<input id="20000" type="number" min="0" value="0" onchange="sumar()">
					<br>
			</div>
		</div>

3
  • justo pusiste mi solución XD Commented el 2 ene. 2019 a las 16:55
  • 2
    @GianFrancoAlexisPomaVidal tardé algunos minutos redactándola, así que técnicamente no es tu solución, de hecho tampoco es mía, es de todos.
    – Shaz
    Commented el 2 ene. 2019 a las 16:56
  • bueno, entonces la solución de todos :D Commented el 2 ene. 2019 a las 16:58

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.