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

    • 时间：2021-07-17 17:05:03

    ①<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>

    相关文章