对齐菜单左侧的图像CSS

Question

我正在尝试创建一个菜单，其左侧有一个图像，右侧有一个菜单。但无法正确设置菜单的样式。目前，图像位于顶部，菜单位于其下方。有什么建议么？

谢谢！

代码在我的共同菜单：

<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表：

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

Answer 1

假设有足够的空间供你的图像和菜单只是（你没有指定图像尺寸）你需要浮动.secondDiv

Example

.secondDiv{ 
    float: left; 
} 

Answer 2

我相信你想实现类似like this demo does但你不使用正确的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; 
} 

感觉自由地再次添加您的颜色样式。