CSS float不起作用？

Question

我的菜单目前位于徽标下方，但我希望它与徽标保持水平。我认为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> 

怎么了？

Answer 1

如果我理解正确，您希望徽标和菜单位于同一水平线上。如果是这样，你可以这样：

1. 浮动标志向左或

   #logo{ 
       margin-top: 15px; 
       width: 200px; 
       height: 30px; 
       position: relative; 
       right: 5px; 
        float:left; 
   } 
   

2. 显示标识为inline-block的

   #logo{ 
       margin-top: 15px; 
       width: 200px; 
       height: 30px; 
       position: relative; 
       right: 5px; 
        display:inline-block; 
   } 
   

Answer 2

将徽标div放在top_menu div后面。