Many ways to do this, some add to html, some to css. You should be able to go to any website that has a form to inspect how they do it.
Just wrap each label/input pair in a span/div and use a class of 'form-element--inline' or 'form-element--block'. Make the former display: inline-block and the latter display:block (maybe with a clearfix). As long as your HTML is structured correctly it should work fine. An alternative is to add an element level descriptive class and style each one individually. I'd have to know more about your project before recommending this. Yet another option: think in terms of 'rows' and use wrappers for each row that are display:block. And then make all labels and input elements inline/inline-block. There are more ways, I'm sure. Hope it helps! Chris On Aug 26, 2014 11:20 PM, "John" <j...@coffeeonmars.com> wrote: > I am trying to build a form, like the type you fill out when you’re buying > something online..billing form with all the fields including city, state, > zip code, etc, where it’s great for the User if those shorter fields are on > one line, with the other, longer fields each on their own line. > > I am googling like mad for such forms, but the word “form” no matter what > other terms, brings up loads of microsoft-related things. > > I believe I need a mix of block and inline, but as I build my little > beastie, the css is getting thick and I’d like to see examples others have > built… > > continuing to google here..thank you for any links! > > John > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
