CSS 浮动不起作用?
我的菜单当前位于徽标下方,但我希望它与徽标水平。我认为 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>
怎么了?
My menu is currently under the logo, but instead I want it to be horizontal to the logo. I think the float
property is the only way to do something like this(?) but it doesn't work, it won't 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>
What's wrong?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
如果我理解正确的话,您希望徽标和菜单位于同一水平线上。如果是这种情况,您可以:
将徽标向左浮动或
<前><代码>#标志{
顶部边距:15px;
宽度:200px;
高度:30px;
位置:相对;
右:5px;
浮动:左;
}
将徽标显示为内联块
<前><代码>#标志{
顶部边距:15px;
宽度:200px;
高度:30px;
位置:相对;
右:5px;
显示:内联块;
}
If I understand correctly you want the Logo and the Menu on the same horizontal line. If that is the case you can:
Float the logo to the left OR
Display the logo as inline-block
将徽标 div 放在 top_menu div 之后。
Put the logo div after the top_menu div.