对齐菜单CSS左侧的图像

I am trying to create a menu that has the image on the left and a menu on the right. But can't get the menu to style correctly. Currently, the image is on the top and menu is underneath it. Any suggestions?

我正在尝试创建一个左侧有图像的菜单和右侧的菜单。但是无法正确地获得菜单样式。目前,图像位于顶部,菜单位于其下方。有什么建议?

Thanks!

Code in my common menu:

常用菜单中的代码:

<div class = "firstDiv">
    <img class = "myImage" src="font.jpg">
    <div class = "secondDiv">
        <nav>
            <ul>
                <li><a href = "index.php">Home</a></li>
                <li><a href = "page1.php">Page 1</a></li>
                <li><a href = "page2.php">Page 2</a></li>
                <li><a href = "page3.php">Page 3</a></li>
                <li><a href = "page4.php">Page 4</a></li>
                <li><a href = "page5.php">Page 5</a></li>
                <li><a href = "page6.php">Page 6</a></li>
            </ul>
        </nav>
    </div>
</div>

CSS Sheet:

nav{
    display: block;
    width: 100%;
    overflow: hidden;
    text-align: center;
}

nav ul {
    padding: .7em;
    list-style: none;
    background: #2f2b23;
    box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 2px 1px rgba(0,0,0,.3) inset; 
    border: 3px solid black;
    /* added*/
   display: inline-block;


}
nav li {
    float:left;
}

nav a {
    float:left;
    padding: .8em .7em;
    text-decoration: none;
    color: black;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-width: 1px;
    border-style: solid;
    border-color: #black #BF7530;
    background: #BF4630;
 }

nav a:hover, nav a:focus {
    outline: 0;
    color: #black;
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
    background: #FFDB73;
}

nav a:active {
    box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}

nav li:first-child a {
    border-left: 0;
    border-radius: 4px 0 0 4px;            
}

nav li:last-child a {
    border-right: 0;
    border-radius: 0 4px 4px 0;            
}

.firstDiv{
    margin: 0 auto;
    background: #a4d25d; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    padding-left: 10px;
    padding-right: 10px;
    border: 5px solid black; 
    width:1140px; 
    height: 362px;
}

.myImage {float:left; border: 5px solid black; margin:5px;}

.secondDiv{
    border-spacing: 15px;
    border: 4px solid black;
    background-color: #FF8700;
    margin: 0 auto;
}

2 个解决方案

#1

Assuming that there is enough room for your image and menu (you didn't specify the image size) you just need to float .secondDiv

假设您的图像和菜单有足够的空间(您没有指定图像大小),您只需要浮动.secondDiv

Example

.secondDiv{
    float: left;
}

#2

I believe you want to achieve similar like this demo does but you are complicating your design by not using right css and html markup:

我相信你想要达到像这个演示类似的功能,但你通过不使用正确的css和html标记使你的设计变得复杂:

html:

<header class="clearfix">
    <div class="firstDiv">
        <img class="myImage" src="font.jpg">
    </div>
    <div class="secondDiv">
        <nav>
            <ul>
                <li><a href="index.php">Home</a>
                </li>
                <li><a href="page1.php">Page 1</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

CSS:

.firstDiv {
    border: 5px solid black;
    width:100px;
    height: 110px;
    float:left;
}
header{
    padding: 5px;
    background: #999;
}
.secondDiv {
    border-spacing: 15px;
    border: 4px solid black;
    background-color: #FF8700;
    float:left;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

Feel free to add your color styles again.

随意添加您的颜色样式。

#1