CODEWITHSUNDEEP
htmlcssinputlabelcss-position
user1529956
user1529956

Reputation: 755

Display two inputs next to each other with label above each html

I want to do something like this

USER         EMAIL
input        input

But I can't figure how to get it to display this way. Basically I want each set of label + input field to be a div, but I want the divs to be side by side. Perhaps I'm using the wrong tags because I'm an html noobie ><

Upvotes: 5

Views: 69472

Answers (2)

Pankaj Singh
Pankaj Singh

Reputation: 531

if you want to use tag, then you can achieve your desired result by following code--

<table>
<tr>
    <td>USER</td>
    <td>EMAIL</td>
</tr>
<tr>
    <td><input type="text" name="user"></td>
    <td><input type="text" name="email"></td>
</tr>
</table>

the output is shown here --- http://jsfiddle.net/hn3U9/

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157334

div is a block level element, that means it will take entire horizontal space by default, inorder to align them side by side, you need to float them else you need to use display: inline-block

Demo

HTML

<div>
    <label>Hello</label>
    <input type="text" />
</div>
<div>
    <label>Hello</label>
    <input type="text" />
</div>

CSS

div {
    display: inline-block;
}

div label {
    display: block;
}

Upvotes: 16

Related Questions