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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。