html - 如何将菜单放在 Logo 旁边？

Question

需要这项工作的 header 的屏幕截图:

如您所见，菜单位于 Logo 下方。我想要它旁边的菜单，在 Logo 的右侧。我不知道这是否可行，但如果可行，我需要一些帮助，谢谢。

这是所有内容的代码，为方便起见将它们分开。

他们的 div 中的菜单和 Logo :

<div id="wrapper">
    <div id="body-wrapper">
        <div class="head">
            <div class="head-wrapper">
                <div class="logo">
                    <img src="http://i.imgur.com/sDnntOE.png">
                        <ul>
                            <li><a href="http://www.chaotixstudios.x10.mx/">Home</a></li>
                            <li><a href="http://www.chaotixstudios.x10.mx/about/about-us.html">About Us</a>
                                <ul>
                                    <li><a href="http://www.chaotixstudios.x10.mx/about/the-team.html">The Team</a></li>
                                    <li><a href="http://www.chaotixstudios.x10.mx/about/history.html">History</a></li>
                                </ul>
                            </li>
                        <li><a href="http://www.chaotixstudios.x10.mx/products/products.html">Products</a>
                            <ul>
                        <li><a href="http://www.chaotixstudios.x10.mx/products/browser.html">Chaotix Browser</a></li>
                                <li><a href="http://www.chaotixstudios.x10.mx/products/useful.html">Useful Beta 1.7.5</a></li>
                                <li><a href="http://www.chaotixstudios.x10.mx/products/cleaner.html">Chaotix Cleaner 1.4</a></li>
                                <li><a href="http://www.chaotixstudios.forumotion.com">Forum</a></li>
                                <li><a href="http://www.chaotixstudios.x10.mx/products/web-dev.html">CDev</a></li>
                                <li><a href="http://www.infinite-pvp.net/">Infinite-PVP</a></li>
                                <li><a href="http://www.chaotixstudios.x10.mx/products/ulta-craft.html">Ulta-Craft</a></li>
                            </ul>
                        </li>
                            <li><a href="">Contact Us</a>
                                <ul>
                                    <li><a href="">E-Mail</a></li>
                                    <li><a href="">News Letter</a></li>
                                    <li><a href="">Social Mediar</a></li>
                                </ul>
                            </li>
                        <li><a href="http://www.chaotixstudios.x10.mx/main/divisions.html">Divisions</a>
                            <ul>
                                <li><a href="http://www.chaotixstudios.x10.mx/gaming/gaming.html">Gaming</a></li>
                                <li><a href="http://www.chaotixstudios.x10.mx/films/films.html">Films</a></li>
                            </ul>
                        </li>
                            <li><a href="http://www.chaotixstudios.forumotion.com/">Chaotix! Forum</a></li>
                            <li><a href="">Partnerships</a>
                                <ul>
                                    <li><a href="https://www.gamefanshop.com/partner-CHAOTIXSTUDIOS/">GameFanShop</a></li>
                                    <li><a href="http://www.forumotion.com/">Forumotion</a></li>
                                </ul>
                            </li>
                        </ul>

CSS:

    <style>
        *{
            background-image:url('http://i.imgur.com/0u7sBsT.png');
            background-color:#999999;
            font-family:Tahoma;color:white;
        }
        div.head{
            text-align:Center;
            padding-top:10px;
        }
        div.body{
            padding-top:100px;
            padding-left:300px;
            padding-right:300px;
            text-align:center;
        }
        div.logo{
            float:left;
        }
        a{
            color:white;
        }
        a:hover{
            color:gray;
        }
        /* Main menu
        ------------------------------------------*/
        ul{
            font-family: Lato,Tahoma,Arial, Verdana;
            font-size: 14px;
            margin: 0;
            padding: 0;
            list-style: none;
            padding-left:25px;
        }

        ul li{
            display: block;
            position: relative;
            float: left;
        }

        li ul{
            display: none;
        }

        ul li a{
            display: block;
            text-decoration: none;
            color: #FFFFFF;
            border-top: 1px solid #000000;
            padding: 5px 15px 5px 15px;
            background: #000000;
            margin-left: 1px;
            white-space: nowrap;
        }

        ul li a:hover{
            background: #999999;
        }
        li:hover ul{
            display: block;
            position: absolute;
        }

        li:hover li{
            float: none;
            font-size: 11px;
        }

        li:hover a{
            background: #000000;
        }

        li:hover li a:hover{
            background: #999999;
        }
    </style>

Answer 1

添加你的CSS

.logo img
        {
            float:left;

        }
        .logo ul
        {
            float:left;

        }

它工作正常。希望对您有所帮助!