如何水平对齐图像和文本（主页菜单）

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

而不是display:inline的{​​{1}}，请使用li或完全删除该样式。

Fiddle

Answer 2

现在只需要horizontal margin来提供空间。要使vertical 1低于其他人，您必须添加display:block而不是display:inline。

li
{
display: block;
}

它适用于你。