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

2019-08-14 09:42:48来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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>

 

 


原文链接:https://www.cnblogs.com/shouke/p/11111502.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JS基础理论相关知识

下一篇:博客模仿