CSS float不起作用?

时间:2010-06-23 23:45:10

标签: css css-float

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

怎么了?

2 个答案:

答案 0 :(得分:1)

如果我理解正确,您希望徽标和菜单位于同一水平线上。如果是这种情况,您可以:

  1. 将徽标浮动到左侧

    #logo{
        margin-top: 15px;
        width: 200px;
        height: 30px;
        position: relative;
        right: 5px;
            float:left;
    }
    
  2. 将徽标显示为内嵌块

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

答案 1 :(得分:0)

将logo div放在top_menu div之后。