CODEWITHSUNDEEP
htmlselectlayoutinputalignment
Michael Durrant
Michael Durrant

Reputation: 96484

How can I align select and input elements on a form?

My text input seems center aligned but my select inputs are top-aligned.
How can I fix this and have them both be the same?

enter image description here

Current HTML code:

<td><input text-align="top" name="configuration[targets_attributes][0][name]" id="configuration_targets_attributes_0_name" size="30" value="bob" type="text"></td>
<td><li class="select input required" id="configuration_targets_attributes_0_maximum_fte_input"><select id="configuration_targets_attributes_0_maximum_fte" name="configuration[targets_attributes][0][maximum_fte]"><option value="1.0" selected="selected">1.0</option>
<option value="0.9">0.9</option>
<option value="0.8">0.8</option>
...
</select>
</li></td>

Upvotes: 0

Views: 1827

Answers (4)

Travesty3
Travesty3

Reputation: 14469

You're using a text-align HTML attribute, which, to my knowledge, doesn't exist. Instead, since you have this in a table, you should be using the CSS property vertical-align: middle.

You also have <li> elements directly inside your <td> tags, which I believe is also invalid. <li> elements can only be children of either <ul> or <ol> tags.

Having said that, using a <table> is not really appropriate for this use. It can be done, but there may be a better way, possibly using floated divs. Tables are meant for tabular data, not for layout. Or perhaps get rid of the table and use a <ul> with floated <li>tags.

Here is an example using a <ul> with floated <li> tags: http://jsfiddle.net/LU3VU/

Upvotes: 0

Jamie De Palmenaer
Jamie De Palmenaer

Reputation: 864

As Callan said, get rid of the li within the td

JSFiddle : http://jsfiddle.net/s8KR3/

If you are still having problems with elements on the same row being on a different height, you should use

td {
    vertical-align: middle;
}

in your css. Note that if it isn't aligned properly, it's probably due to another css rule you already added, but didn't post here.

Upvotes: 0

Learner
Learner

Reputation: 4004

Must be your CSS. It works fine without any styling: http://jsfiddle.net/32mxD/1/

Also, as other suggested, from consistency and best practice point of view, not a good idea to have LI within a TD and then have Select within the LI

Upvotes: 0

Callan
Callan

Reputation: 475

I would start by being more consistent with your containers. You put the input directly inside the td, but you put the select inside an li. Try putting them both in the same containers. You probably don't want to use an li right there since it's not in a list. So I would probably get rid of the li in the second td.

Upvotes: 1

Related Questions