Question

我似乎无法将我的徽标图片与我的列表放在同一行，即使我将display:inline放在图片上。

任何人都可以告诉我这是什么方法，因为使用float: right也会使我的列表项以相反的顺序出现！

Answer 1

那样做：

#nav img {float:left;}

Answer 2

尝试<ul style="display:inline;">

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>

和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;}

你可以改变你喜欢的颜色和其他一切！

Answer 4

像Cliff提到的那样，你需要浮动左边的img或锚点。

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

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

并考虑：

#nav ul {
    float: right;
}

Answer 5

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

使图像和列表出现在同一行

5 个答案: