在菜單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

例

.secondDiv{
    float: left;
}

Answer 2

我相信您希望實現與本演示類似的類似功能，但是您由於不使用正確的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;
}

隨時再次添加您的顏色樣式。