使得<li>在一行显示，去除浮动的方法

最新推荐文章于 2024-05-02 18:12:22 发布

weixin_33969116

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量220

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaozhumaopao/p/5751246.html

版权

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

转载于:https://www.cnblogs.com/xiaozhumaopao/p/5751246.html

weixin_33969116

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使得<li>在一行显示，去除浮动的方法

①<li>使用浮动的方法，但是要用div包裹起来，该父元素需要设置宽度与高度：<!DOCTYPE html><html><head><meta charset="utf-8"><script src="jquery.js"></script><style type="text/cs...
复制链接

扫一扫