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

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

by:授客 QQ：1033553122

例子：让两个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 @ 2019-06-30 22:18  授客  阅读(8000)  评论(0)  编辑  收藏  举报