我的菜单目前位于徽标下方,但我希望它与徽标保持水平。我认为float
属性是做这样的事情的唯一方法(?)但它不起作用,它不会浮动。
#top_menu {
height: 20px;
color: #333;
position: relative;
float: right;
}
#top_menu ul li {
float: left;
color:#333;
padding-right:15px;
font-family: Tahoma, Helvetica, sans-serif;
font-size:11px;
}
#top_menu ul li a {
text-decoration:none;
color: #666;
padding: 1px;
padding-right: 8px;
}
#top_menu ul li a:hover {
color:#f2e9c9;
}
#logo{
margin-top: 15px;
width: 200px;
height: 30px;
position: relative;
right: 5px;
}
<div id="logo"><a href="http://www.playcreatividad.com/es/index.php"><img src="logot.png" alt="lolly"></a></div>
<div id="top_menu">
<ul>
<li><a href="http://www.playcreatividad.com/es/index.php" title="Enlace a Portada">Portada</a>|</li>
<li><a href="http://www.playcreatividad.com/es/equipo.php" title="Enlace a Equipo">Equipo</a>|</li>
<li><a href="http://www.playcreatividad.com/es/workbook.php" title="Enlace a Workbook">Workbook</a>|</li>
<li><a href="http://www.playcreatividad.com/es/frescologia.php" title="Enlace a Frescología">Frescología</a>|</li>
<li><a href="http://www.playcreatividad.com/es/clientes.php" title="Enlace a Clientes">Clientes</a>|</li>
<li><a href="http://playsaid.blogspot.com/" target="_blank" title="Enlace a Blog">Blog</a>|</li>
<li><a href="http://www.playcreatividad.com/es/noticias.php" title="Enlace a Noticias">Noticias</a></li>
</ul>
</div>
怎么了?
答案 0 :(得分:1)
如果我理解正确,您希望徽标和菜单位于同一水平线上。如果是这种情况,您可以:
将徽标浮动到左侧
#logo{
margin-top: 15px;
width: 200px;
height: 30px;
position: relative;
right: 5px;
float:left;
}
将徽标显示为内嵌块
#logo{
margin-top: 15px;
width: 200px;
height: 30px;
position: relative;
right: 5px;
display:inline-block;
}
答案 1 :(得分:0)
将logo div放在top_menu div之后。