How to align input element in HTML? - html

Question

How can I do that?
My HTML code is
<p> <input type="text" name="Usuari" size="20" maxlength="60"/>
<p>CLAU:</label> <input type="text" name="Clau" size="20" maxlength="20" /></p>
<p><input type="submit" name="submit" value="ACCÉS" /></p>-->
and my CSS code is
input {
padding: 5px;
font-weight: bold;
font-size: 1em;
color: #008040;
background: #FFFFFF;
border:1px dotted #004080;
}

Answer 1

I would place "USUARI:" and "CLAU:" into div with class and give them fixed size.
<div>
<div>
<div class="hints">
USUARI:
</div>
</div><input type="text" name="Usuari" size="20" maxlength="60"/>
</div>
<div>
<div class="hints">CLAU:
</div>
<input type="text" name="Clau" size="20" maxlength="20" />
</div>
</div>
<input type="submit" name="submit" value="ACCÉS" />
<style>
input {
padding: 5px;
font-weight: bold;
font-size: 1em;
color: #008040;
background: #FFFFFF;
border:1px dotted #004080;
}
.hints
{
width: 80px;
float: left;
}
</style>
https://jsfiddle.net/gm5wtw1e/

Answer 2

There are several ways to do that.
You can either use flex or with just a plain table:
<table>
<tr>
<td>Name:</td>
<td><input name="name"></td>
</tr>
<tr>
<td>Sur Name:</td>
<td><input name="surname"></td>
</tr>
</table>
---
<table>
<tr>
<td style="text-align: right;">Name:</td>
<td><input name="name"></td>
</tr>
<tr>
<td>Sur Name:</td>
<td><input name="surname"></td>
</tr>
</table>

Answer 3

p{
display: table-cell;
text-align: right;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}
<div class="row"><p> <input type="text" name="Usuari" size="20" maxlength="60"/></div>
<div class="row"><p>CLAU:</label> <input type="text" name="Clau" size="20" maxlength="20" /></p></div>
<p><input type="submit" name="submit" value="ACCÉS" /></p>

Answer 4

label
{
display: block;
}
label span
{
display: inline-block;
text-align: left;
width: 100px;
}
<label>
<span>USARI:</span>
<input type="text" />
</label>
<label>
<span>CLAU:</span>
<input type="text" />
</label>
<label>
<span></span>
<input type="password" />
</label>
there are few error in your HTML code, you close the tag label but you never open it.
You should also wrap your fields in tag and wrap your label in tag .
You don't need to open the tag all the time, you can open it and close it at the beginning and at the end of the form.
There is also a --> at the end of the code, I assume that's another mistake.
Here is my solution to your question:
HTML
<label>
<span>USARI:</span>
<input type="text" />
</label>
<label>
<span>CLAU:</span>
<input type="text" />
</label>
<label>
<span></span>
<input type="password" />
</label>
And here is my css code:
CSS
label
{
display: block;
}
label span
{
display: inline-block;
text-align: left;
width: 100px;
}
You can now play with the CSS code in order to find the design that you like the most.