当前位置： 移动技术网 > IT编程>网页制作>CSS > CSS 让div,span等块级、非快级元素排列在同一行

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

2019年06月30日  | 移动技术网IT编程  | 我要评论

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

 

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网