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

时间 2019-12-08

标签 css div span 元素排列一行栏目 CSS 繁體版

原文原文链接

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

by:授客 QQ：1033553122spa

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

给div添加float样式3d

<!DOCTYPE html> htm

<html> blog

<head lang="en"> class

<style> float

div{ 方法

float: left; im

}

</style>

</head>

<body>

div1

</div>

div2

</div>

</body>

</html>

说明：让div和span排列在一块儿也能够用上述上方法

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

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

使用display-inline（为何要使用display: inline-block;而不是display: inline; 是由于display: inline致使元素的height和width样式失效）

<!DOCTYPE html>

<html>

<style>

div,span{

display: inline-block;

}

.span2 {

float:right

}

</style>

</head>

<body>

div1

</div>

span1

</span>

span2

</span>

</body>

</html>

运行结果

说明：第一个div和第一个span之间存在空白间隙，那是由于div元素和span元素之间存在换行等空白，去除便可，以下

div1

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

span1

</span>