Align elements vertically

Navigation
3

What I want is that the input on the right side is not one more to the left or to the right than others. I do not care if it is necessary to use css or if it is simply a div tag. 

<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>
    
asked by Hugo Galindo Lorenzo 02.01.2019 в 17:32
source

2 answers

4

This is one of the possible solutions that I mentioned with the tag table of 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>
    
answered by 02.01.2019 / 18:02
source
4

The accepted response is a bad practice and a bad application of HTML tables, and should not be applied in any context. Here the support:

HTML tables exist to tabulate information, not to give style, to pretend to "style" or generate the structure with tables, it is damaging all the semantics of the site, the future improvements are complicated, it does not go to work well on all devices and finally and perhaps most importantly, accessibility is being affected (people with disabilities). This is not new, it has been a bad practice for several years now, since the last decade.

My answer / solution:

As to whether you should use CSS or not, the answer is: Yes, you must use CSS , HTML does not offer styles, and basically when you do not use styles, it results in assigning the browser ( default styles).

Bearing in mind that you say you do not want to use any framework, the simplest thing would be to make <label> be a inline-block element and assign a fixed width. The only "problem" would be the responsive, for which you would have to apply half 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>
    
answered by 02.01.2019 в 17:53
Prevent letters from being run when printing data on screen Javascript only runs in the first element of the table