Html 对齐菜单CSS左侧的图像
我正在尝试创建一个菜单,左边是图像,右边是菜单。但无法正确设置菜单样式。目前,图像位于顶部,菜单位于其下方。有什么建议吗 谢谢 我的常用菜单中的代码:Html 对齐菜单CSS左侧的图像,html,css,Html,Css,我正在尝试创建一个菜单,左边是图像,右边是菜单。但无法正确设置菜单样式。目前,图像位于顶部,菜单位于其下方。有什么建议吗 谢谢 我的常用菜单中的代码: <div class = "firstDiv"> <img class = "myImage" src="font.jpg"> <div class = "secondDiv"> <nav> <ul>
<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>
假设图像和菜单有足够的空间(您没有指定图像大小),只需浮动
.secondDiv
我相信您希望实现类似的效果,但由于未使用正确的css和html标记,您的设计变得复杂: html:
欢迎再次添加您的颜色样式。阅读有关上述Clearfix css的更多信息的链接是@Brendan User要求图像位于左侧,菜单位于右侧。演示演示了这一点。他拥有的css不是真实世界的css代码。在我的演示中,我试着为用户简化css/html。啊,我明白了,你真是太好了,而不是只给他们留下一行。干得好@布伦丹,一句话的回答是不合适的!因为这只是教用户修改代码以获得输出,但并没有教用户正确的实现方法!!没错,这就是为什么我感谢你花时间做这一切。我再次更新了我的答案。
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;
}
.secondDiv{
float: left;
}
<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>
.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;
}