css span寬度和css span高度成功設置經驗篇

時間 2019-12-08

標籤 css span 寬度高度成功設置經驗欄目 CSS 简体版

原文原文鏈接

咱們介紹兩種狀況下的對span寬度高度樣式成功設置。css

爲了觀察和實踐CSS SPAN寬度和span高度成功設置，DIVCSS5新建一個css命名爲「.divcss5」的盒子，設置css寬度爲150px，css高度爲100px,爲了觀察高度和寬度樣式，咱們再設置個css邊框屬性樣式。html

一、這樣應用案例CSS代碼爲：ui

.divcss5{
width:150px;height:100px;
border:1px solid #000;
}

二、Body內Html代碼爲：spa

divcss5 span上<span class="divcss5">我在SPAN標籤內</span>span外

三、截圖firefox

對span設置寬度和高度未生效xml

從上圖咱們看見對span標籤設置寬度和高度樣式沒有生效。接下來咱們介紹兩種解決span設置高度和寬度生效。htm

第一種狀況：對span設置寬度高度後，獨佔一行（先後將換行）對象

對SPAN設置寬度和高度後效果圖

Span成功設置寬度和高度後獨佔一行blog

咱們用到樣式對span設置display:block。
在span的css中增長css display屬性，將display值設置爲block類型（塊），便可實現。utf-8

最終CSS+DIV代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>span寬度高度解決案例</title>
<style>
.divcss5{
width:150px;height:100px;
border:1px solid #000;
display:block
}
</style>
</head>
<body>
divcss5 span上<span class="divcss5">我在SPAN標籤內</span>span外
</body>
</html>

完整代碼與效果截圖

寬度高度生效

第二種狀況：對span設置寬度高度後，先後內容不換行

對span標籤設置寬度和高度效果圖：

對span成功設置寬度和高度同時與先後內容緊貼不換行

這種狀況是即能實現span寬度和高度生效，又不讓span對象先後內容不換行。

在css2.1標準中爲display增長了一個叫inline-block的屬性值，恰好能夠實現便是inline對象，又能夠像block那樣設置寬度的屬性值，這個屬性值在ie6以上版本都有效，firefox要在3.0之後才行，若是要兼容2.0的朋友可使用-moz-inline-box達到一樣的效果。

具體解決CSS代碼：

display:-moz-inline-box; /* css註釋：for ff2 */
display:inline-block;

注意先後順序

最終CSS DIV代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>span寬度高度解決案例</title>
<style>
.divcss5{
width:150px;height:100px;
border:1px solid #000;
display:-moz-inline-box; /* css註釋：for ff2 */
display:inline-block;
}
</style>
</head>
<body>
divcss5 span上<span class="divcss5">我在SPAN標籤內</span>span外
</body>
</html>

完整完美解決SPAN高度和高度兼容代碼與效果截圖

成功完美解決SPAN寬度高度樣式

總結，成功對span設置寬度和高度生效兩種狀況的選擇，可根據本身須要肯定。完美解決又不讓span標籤先後內容換行，這個時候咱們使用display:-moz-inline-box; display:inline-block;便可解決。

相關標籤/搜索

每日一句

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