Question

I am using the <ul><li> list tag within which I have 3 tags like sos:

<ul id="reg-lists" >
    <li class="one">
            <select>...</select>
        </li> 
    <li class="two">
            <select>...</select>
        </li> 
    <li class="three">
            <select>...</select>
        </li> 
    </ul>

I have the proper css to make the list horizontal:

#the-form li {
    display:inline !important;
    list-style-type: none;
    padding-right: 10px;    
}

I does’nt seem to work though and am not sure why. Horizontal rule seems to apply well until you put the combos. Would appreciate your help. Thanks

Answer 1

It works fine for me — see this JSFiddle — the list items are displayed horizontally, at least they are when I look at it in Firefox.

If you’re seeing something else in another browser, please let us know.

If this is case, the solution may be to use display:inline-block instead of display:inline.

inline-block is similar to inline, but allows the element to contain block type elements, which are not allowed by the normal display:inline style.

Hope that helps.