Aligning form fields horizontally using CSS?

CM1
1

What CSS markup can I use to get two (or more) form elements to appear side-by-side? Furthermore, I chose “Left of control” for the label alignment but it still displays above. I need this to all be on a single line. This is what I see now:

Also, is there a way to make a form entry submit the data upon hitting the enter key rather than clicking a “submit” button?

2

Each form field with label and input is in a div of it’s own with a class “field-row” that can be styled. Additionally, each field has an ID associated with it you can use to style. In the configure box for the field on the Form widget you can apply classes and IDs. If you do not specify an ID, the field label is used to create a lowercase, hyphen-spaced ID. You can then use the ID for your CSS rules.

To create the single line look you can float the items to the left and space them as you want them to appear. I have included an example of this below. The IDs used are working off the field label and the form widget has a root class applied called “tracking-form”.

clear: both;   
float: none;   
font-family: Verdana;   
font-size: 10pt;   
height: 25px;   
line-height: 25px;   
text-transform: uppercase;   
width: 400px;   
margin-bottom: 20px;   
}   
.tracking-form #field-track-a-shipment-label-container, .tracking-form #field-track-a-shipment-input-container, .tracking-form input[type="submit"] {   
float: left;   
margin-right: 10px;   
}   
.tracking-form input[type="submit"] {   
clear: right;   
} ```   
 
and a screenshot for example:   
[![](https://d37wxxhohlp07s.cloudfront.net/s3_images/857627/Form-SingleLine-Styled_inline.png?1360768295)](https://d37wxxhohlp07s.cloudfront.net/s3_images/857627/Form-SingleLine-Styled.png?1360768295)
3

I’m came here to ask about this and very glad someone posted CSS for me to try out. Thank you ~

4

Let us know if this example doesn’t work for you.

5

Thanks all - this answers a question that I had tonight as well. The form widget field labels were aligning top regardless of what I selected for the label alignment. I’ll try the adjustments Daved suggested tomorrow. Fingers crossed.