Getting image and list to appear on the same line

Question

This is my code: http://jsfiddle.net/FMfDM/1/

I can't seem to get my logo image to sit on the same line as my list, even if I put display:inline on the image.

Can anyone please tell me what is the proper approach to this, since using float: right is also making my list items appear in reverse order!

Answer 1

Like Cliff mentioned, you'll need to float the left img or anchor.

http://jsfiddle.net/scottmey/BKWrR/

#nav a, #nav img {
    float:left;
}

and consider:

#nav ul {
    float: right;
}

Answer 2

<nav id="nav">
  <a href="index.html"><img style="float:left" src="logo.png" id="logo"></a>
  <ul>
     <li><a href="features.html">Features</a></li>
     <li><a href="pricing.html">Pricing</a></li>
     <li><a href="signup.html">Sign up</a></li>
     <li><a href="login.html">Login</a></li>
  </ul>
</nav>

Answer 3

jsfiddle

html

    <nav id="nav">

  <ul>
      <a href="index.html"><img src="logo.png" id="logo"/></a>
     <li><a href="features.html">Features</a></li>
     <li><a href="pricing.html">Pricing</a></li>
     <li><a href="signup.html">Sign up</a></li>
     <li><a href="login.html">Login</a></li>
  </ul>
</nav>

and css

* {
    padding:0px;
    margin:0px;
}


ul li{
  display: inline;
    float: right;
}
li {
    list-style-type: none;
    background:gold;
    width:80px;
    border:1px solid black;
    text-align:center;
}

#nav {padding-top: 30px;}

you can change color and everything else what you like!

Answer 4

try <ul style="display:inline;">

Answer 5

That will do it:

#nav img {float:left;}