Place ul's side-by-side for searches with multiple fields

Anonymous

#67194

Hello.

How can I place the the fields side by side when I have multiple fields?

• A
• B

• C
• D

Field 1 Field 2
A C
B D

Thanks!

Trevor

#67205

Using custom css, targeting the selectors for the elements you want to do this to, and using display: inline; and left or right margins to space them. If I could see the actual form (live) then I could advise better.

Anonymous

#67710

I’ve tried playing around with the CSS selectors but I cannot get the uls to line up in columns without all the lis displaying inline. If you could let me know the relevant CSS selector for what I want to do it would be much appreciated. Thanks! Example below:

http://www.furthereast.com/uncategorized/sf-test/

Trevor

#67737

Hi, Are you able to take a screenshot and then using something like photoshop to make it look as you want and let me have sight of that?

Anonymous

#67743

Sure. The link now includes a (crude) screenshot below.

http://www.furthereast.com/uncategorized/sf-test/

Thanks.

Trevor

#68079

Ah. OK, you need greater specificty in the selectors, like this:

.searchandfilter > ul > li {
  display: inline-block !important;
}

The > means only direct parent to child and so stops ul’s and li’s further inside being affected.

Anonymous

#68112

Perfect! Thank you once again for the prompt and helpful reply!

Trevor

#68114

This reply has been marked as private.

[Author]

Posts