I have this few line of html
code i want to arrange the label
and input
side by side with the label
on top of the input
with css
but am not able to work around it. I found similar question herewhich suggest use of display:inline-block;
to achieve that but after including it in my code an not able to do it.
body {
background-color: red;
}
input[type=text] {
border: 2px solid black;
border-radius: 4px;
margin-left: 150px;
display: inline-block;
clear: both;
}
input[type=number] {
border: 2px solid black;
border-radius: 4px;
margin-left: 150px;
display: inline-block;
clear: both;
}
<div id=tk>
<form action="" , method="">
<div id="styleform">
<label for="NAME">   FIRST NAME</label></br>
<input type="text" id="NAME" size="20"></br>
</br>
<label for="no">   NUMBER</label></br>
<input type="number" id="no" , size="45"></br>
</br>
<label for="age">   AGE</label></br>
<input type="number" id="age" size="45"></br>
</br>
<label for="S_NO:">   CODE</label></br>
<input type="text" id="S_NO:" size="20"></br>
</br>
</div>
</form>
</div>
I think this kind of easy question for some of you this new be in web development
This how i want it to look like
UPDATE
Updated fiddle after image provided
@LAS You are inserting line breaks, that is part of the problem. I have created this fiddle, fixing several things: https://jsfiddle.net/Lu5k1yk8/6/
<br>
or <br />
, not </ br>
and removed them after labelsAlso, I would suggest not using spaces (nbsp;
) or <br />
's and instead using CSS to create the correct spaces and line breaks.
Here is a good demonstration of how to use padding and margins: http://www.digizol.com/2006/12/margin-vs-padding-css-properties.html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With