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

随意再添加颜色样式。

对齐菜单CSS左侧的图像

2 个答案: