How to make the filter on the same line?

Anonymous

#41399

Hi Trevor,

I saw on your FAQ this code to make the filter on the same line :

.searchandfilter ul li
{
    width: auto;
    display: inline-block;
}
li.sf-field-taxonomy-portfolio_category{display: inline-block !important}
li.sf-field-taxonomy-portfolio_tag{display: inline-block !important}
.searchandfilter h4 {
color: #ff6300 !important;
{

But I would like to add same space between each menu, like this :

How can I make it?

Thanks,
Benoit

Trevor

#41403

You would need to add some margin on all of them too, like this maybe?

.searchandfilter ul li {
    width: auto;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}
li.sf-field-taxonomy-portfolio_category, li.sf-field-taxonomy-portfolio_tag {
    display: inline-block !important;
    margin-left: 10px;
    margin-right: 10px;
}

The close bracket is also wrong on the last selector that you showed. It should be this:

.searchandfilter h4 {
color: #ff6300 !important;
}

Anonymous

#41408

This reply has been marked as private.

Trevor

#41411

Hi

I will need to see a live page then, for me to see the issue.

Anonymous

#41412

This reply has been marked as private.

Trevor

#41413

OK, this might do it:

.searchandfilter h4, .searchandfilter label {
  margin-left: 5px !important;
  margin-right: 5px !important;
}

I made this by using Firefox and firebug to inspect and play with the css. It is worth starting to learn to use these tools.

Anonymous

#41470

This reply has been marked as private.

Trevor

#41481

Can mark this as resolved and close the thread?

Anonymous

#41482

This reply has been marked as private.

[Author]

Posts