Сделать меню и изображение в одной строке

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

Вы можете сделать свой div display:inline-block или float:right;, если в родительском месте есть место (700px).

Answer 2

DIV является элементом блока, поэтому он не будет отображаться в той же строке, что и все остальное, если вы не измените его свойство inline:

#myslidemenu { display:inline; } 

Также обратите внимание, что вам придется изменить стили <ul>, чтобы отображать теги <li> в одной строке. См. Эту ссылку для получения дополнительной информации по этой части .

edit Я не уверен, что слайд-меню jQuery делает со стилями <div> или <ul> - вы можете посмотреть Firebug после его рендеринга.

Answer 3

попробуйте

#menu ul li { display: inline; }