使菜单和图像显示在同一行

Question

我想让我的菜单和图片出现在同一条线上，但遗憾的是，这似乎并没有发生。谁能告诉我为什么以及如何解决我的问题呢？我有以下图片和菜单......

HTML

        <div id="header">

        <img alt="" height="67" src="Aidanlogo.png" width="400" />
        <div id="myslidemenu" class="jqueryslidemenu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <br style="clear: left" />
        </div>
    </div>

菜单CSS：http://pastebin.com/drMD7gwg

标题CSS

  #header {
width: 700px;
margin-left: auto ;
margin-right: auto ;

}

Answer 1

Div是块元素，因此默认情况下它将始终显示在单独的行上。

您可以将图像设为块并向左浮动（display:block; float:left;）

假设父母（700px）有空间，您可以设置div display:inline-block或float:right;。

Answer 2

DIV是一个块元素，因此除非您更改它的inline属性，否则它不会显示在同一行上：

#myslidemenu { display:inline; } 

另请注意，您必须修改<ul>样式才能在一行中显示<li>标记。 See this link for more on that part。

编辑我不确定jQuery幻灯片菜单对<div>或<ul>样式的作用 - 您可能会在Firebug之后查看它呈现。

Answer 3

试试这个

#menu ul li { display: inline; }