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

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

 

posted @   小猪冒泡  阅读(14393)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手