CODEWITHSUNDEEP
html
Sumico
Sumico

Reputation: 47

Display 2 labels and inputs on the same line

Here's some sample code

<label for="input1">input1</label>
<input id="input1" name="input1" type="text" required>
<label for="input2">input2</label>
<input id="input2" name="input2" type="date">

Currently, it displays like this:

Label Label Input Input

I want it do do this:

Label Input Label Input

Any ideas? Do I need to provide more code?

CSS

label { cursor: pointer; width: 250px; display: block; float: left; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

Upvotes: 4

Views: 27841

Answers (3)

insertusernamehere
insertusernamehere

Reputation: 23610

So, with your updated question it's pretty simple to solve. When you use float on an element, it's taken out of the normal positioning of inline elements. This means, that the labels have like a higher priority to be on the left side. That's why you get this output: label, label, input, input. When you also add float to the input fields, the original order is restored. Or, when only using inline- or inline-block-elements, you can build a lot without the need of floating elements. So in your case, you could also simply change this:

label {
    […]
    display: block;
    float:   left;
}

to this:

label {
    […]
    display: inline-block;
}

Upvotes: 5

Sumico
Sumico

Reputation: 47

alright, while i was adding the css, I decided to try something. 

input[type="text"], input[type="date"]{ float: left; }

seemed to fix the problem, but I don't know why. If anyone can explain, that would be great.

Upvotes: 0

kakarott
kakarott

Reputation: 211

<table>
<tr>
<td><label for="input1">input1</label></td>
<td><input id="input1" name="input1" type="text" required></td>
<td><label for="input2">input2</label></td>
<td><input id="input2" name="input2" type="date"></td>
</tr>
</table>

Upvotes: -1

Related Questions