CSS随笔

DIV 定义宽度后，增加float :left;属性，不会霸占一行，后面的元素不换行，

否则DIV会占一行


CSS
#flaotbtn{
        width:35px;
        height:35px;
        position:absolute;
        bottom:70px;
        right:2px;
        display:none;
        background:url(../p_w_picpaths/up.png) no-repeat;
}
#flaotbtn a{
        display: block;width:35px;height:35px;
}
#coverdiv{
        width:100%;height:30px;position:absolute;bottom:40px;background:#80BEDB;display:none;
        border-top-right-radius:2em;border-top-left-radius:2em;
}
#coverdiv ul li{
        float: left;
        width: 150px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-bottom: none;
}
#coverdiv ul li a#commonSearch{
        width: 150px;
        display: block;
}

HTML

<!-- 遮罩层 -->
<div id="flaotbtn">
        <a id="otherBtn" href="javascript:void(0);"></a>
</div>
<div id="coverdiv">
      <ul>
        <li>
            <a id="commonSearch" href="javascript:void(0);">常用查询</a>
        </li>
        <li style="float: right;">
            <a id="closeCover" href="javascript:void(0);">关闭</a>
        </li>
    </ul>
</div>

JS

  //遮罩层
$("#flaotbtn").fadeIn(200);
$("#otherBtn").click(function(){
    $("#coverdiv").fadeIn(500);
});
$("#closeCover").click(function(){
    $("#coverdiv").fadeOut(500);
});
//常用查询
$("#commonSearch").click(function(){
    Dialogs.load("index/commonSearch/view.htm",{},{
    draggable : true,
    resizable : false,
    maximizable : false,
    title : '常用查询',
    lightbox : true,
    width : 550,
    height : 420
});
})