css - 如何水平对齐图像和文本(主页菜单)

Question

这是我的代码，我想要的是仅使用 css 将其水平排列。

    <div id="menu">


    <img class="logo" src="http://lorempixel.com/148/56/">
    <span class="fleft">
    <ul class="tab">
    <li> <a href>home </a> </li>
    <li> <a href> about us </a> </li>
    <li>  <a href>products </a> </li>
    <li> <a href> services </a> </li>
    <li> <a href> blog </a> </li>
    <li>  <a href>contact us </a> </li>
    </span>
    </div>

和CSS

这是演示

http://jsfiddle.net/5h9qmzou/

Answer 1

不要为 li 使用 display:inline，而是使用 display:block 或完全删除样式。

Fiddle