使得
  • 在一行显示,去除浮动的方法

  • ①<li>使用浮动的方法,但是要用div包裹起来,该父元素需要设置宽度与高度:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="jquery.js"></script>
    <style type="text/css">
        .deo1 ul{
            width:100%;/*这里设置为确定的值也可以*/
            height:20px;
            background-color:yellow;
        }
        .deo1 ul li{
            float:left;
            border:1px solid red;
            margin-right:8px;
            padding:0px;
        }    
    </style>
    <script>
    $(function(){
    
    });
    </script>
    </head>
    <body>
    <div class="deo1">
    <ul>
    <li><a href="###">这是1个</a></li>
    <li><a href="###">这是2个</a></li>
    <li><a href="###">这是3个</a></li>
    <li><a href="###">这是4个</a></li>
    <li><a href="###">这是5个</a></li>
    <li><a href="###">这是6个</a></li>
    <div class="clear"></div>
    </ul>
    </div>
    <div deo2>jfsdljfklsdjfds</div>
    </body>
    
    </html>

    ②不用设置ul的高度,使用class=clear清除浮动

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="jquery.js"></script>
    <style type="text/css">
        ul{
            width:80%;
            background-color:yellow;
        }
        ul li{
            float:left;
            border:1px solid red;
            margin-right:8px;
            padding:0px;
        }    
        .clear{
            clear:both;
        }
    </style>
    <script>
    $(function(){
    
    });
    </script>
    </head>
    <body>
    
    <ul>
    <li><a href="###">这是1个</a></li>
    <li><a href="###">这是2个</a></li>
    <li><a href="###">这是3个</a></li>
    <li><a href="###">这是4个</a></li>
    <li><a href="###">这是5个</a></li>
    <li><a href="###">这是6个</a></li>
    <div class="clear"></div>
    </ul>
    
    <div deo2>jfsdljfklsdjfds</div>
    </body>
    
    </html>

    ③不使用浮动,而是使用display:inline-block,值得注意的是<li>之间会出现间距,解决的方法是:使用css的margin-right:-8px;或者<li>元素之间不要留有空格,

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="jquery.js"></script>
    <style type="text/css">
        ul{
            width:80%;
            background-color:yellow;
        }
        ul li{
            display:inline-block;
            border:1px solid red;
            margin-right:-8px;
            padding:0px;
        }    
        
    </style>
    <script>
    $(function(){
    
    });
    </script>
    </head>
    <body>
    
    <ul>
    <li><a href="###">这是1个</a></li>
    <li><a href="###">这是2个</a></li>
    <li><a href="###">这是3个</a></li>
    <li><a href="###">这是4个</a></li>
    <li><a href="###">这是5个</a></li>
    <li><a href="###">这是6个</a></li>
    </ul>
    
    <div deo2>jfsdljfklsdjfds</div>
    </body>
    
    </html>

    或者把<li>元素放在一行

    <li><a href="###">这是1个</a></li><li><a href="###">这是2个</a></li><li><a href="###">这是3个</a></li>

     


    免责声明!

    本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



     
    粤ICP备18138465号  © 2018-2025 CODEPRJ.COM