li not displaying inline [closed]

Answer 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:

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

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

Answer 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).