Li Not Displaying Inline

I am displaying a list of movies from a database- they are supposed to be displaying inline, but they are displaying vertically instead. I have tried using inline-block for li as w

Solution 1:

The <div>s and the <p> within the <li> are block elements. You should place display:inline on those <div>s and <p>.

Also, any HTML in the $description variable that are block-level elements are going to cause the same behavior.

EDIT: You have much bigger problems on your site that are causing the issue.

You are repeating your <div id="movienav"></div> code over and over again, each with a <ul> and one <li> item in it. Firstly, you cannot have more than on container with the same, unique ID on it. Second, those <div>s are block elements, thus why they are not displaying inline.

You need to set up your structure to look more like this:

<divid="movienav"><ul><li></li><li></li><li></li><li></li></ul></div>

Not the way you have it, then your style should work fine.

Solution 2:

If you want to display them in one line you can use float property.

li { 
    float: left;
    margin-right: 10px;
}

This will display them in one line but not as inline elements (they will still be block elements).