How to line up HTML input elements?

Question

I am hoping to find a resource for lining up input elements in a HTML page. I find it difficult to get a select element and a text box to be the same width even when using t

Answer 1

I found that if you set select and input element border and padding to 0, they are same width. (Tested on Chrome 14, Firefox 7.0.1, Opera 11.51, IE 9)

Putting 1px border/padding on select and input elements makes input element 2 pixels wider. For example:

    
    
        Value 1
        Value 2
    


.style select {
    width: 100px;
    padding: 1px;
    border: 1px solid black;
}
.style input {
    width: 96px; /* -2 px for 1px padding(1px from each side) and -2px for border
    (select element seems to put border inside, not outside?) */
    padding: 1px;
    border: 1px solid black;
}