CSS 让div,span等块级、非快级元素排列在同一行

div,span等块级、非快级元素排列在同一行

by:授客 QQ1033553122

例子:让两个div排列在同一行

给div添加float样式

<!DOCTYPE html> 

<html> 

<head lang="en"> 

    <meta charset="UTF-8"> 

    <style> 

        div{ 

            float: left; 

        } 

    </style> 

</head> 

<body> 

<div style="height: 40px;width: 80px;background-color: red" > 

    div1 

</div> 

<div style="height: 40px;width: 70px;background-color:grey" > 

    div2 

</div> 

</body> 

</html>

 

 

 

 

说明:让div和span排列在一起也可以用上述上方法

例子:让div和两个span排列在同一行

额外要求,然第二个span排列在最右侧

 

使用display-inline(为什么要使用display: inline-block;而不是display: inline; 是因为display: inline导致元素的height和width样式失效)

<!DOCTYPE html> 

<html> 

<head lang="en"> 

    <meta charset="UTF-8"> 

    <style>     

       div,span{ 

            display: inline-block;   

       } 

       

    .span2 {

       float:right

    }

    </style> 

</head> 

<body>

<div style="height: 40px;width: 80px;background-color: red" > 

    div1 

</div>

<span style="height: 40px;width: 70px;background-color:blue"> 

        span1 

    </span>

<span class="span2" style="height: 40px;width: 70px;background-color:grey"> 

        span2

    </span>

</body>

</html>

 

运行结果

 

 

 

说明:第一个div和第一个span之间存在空白间隙,那是因为div元素和span元素之间存在换行等空白,去除即可,如下

    <div style="height: 40px;width: 80px;background-color: red" > 

        div1 

    </div><span style="height: 40px;width: 70px;background-color:blue"> 

            span1 

</span>

 

 

posted @   授客  阅读(8213)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示