css設置span元素的尺寸

来源:http://www.cnblogs.com/softwhy/archive/2016/01/11/5122871.html
-Advertisement-
Play Games

css設置span元素的尺寸:在預設狀態下是無法設置span元素的尺寸的,只能夠根據內容的尺寸自適應,也就是說給span元素設置width和height屬性預設條件是無效的。之所以會出現這種情況是因為span元素是內聯元素,內聯元素無法設置尺寸的,只要設置為塊級或者內聯塊級元素即可。代碼實例如下: ...


css設置span元素的尺寸:
在預設狀態下是無法設置span元素的尺寸的,只能夠根據內容的尺寸自適應,也就是說給span元素設置width和height屬性預設條件是無效的。之所以會出現這種情況是因為span元素是內聯元素,內聯元素無法設置尺寸的,只要設置為塊級或者內聯塊級元素即可。
代碼實例如下:

 

<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="http://www.softwhy.com/" />    
<title>螞蟻部落</title>    
<style type="text/css">
#antzone{
  width:200px;
  height:100px;
  background:green;
  display:block;
}
</style>    
</head>  
<body>  
<span id="antzone"></span> 
</body>    
</html>

 

以上代碼將span元素添加display:block屬性之後,可以將其設置為塊級元素,也就能夠設置尺寸了,也可以使用display:inline-block將其設置為內聯塊級元素,也可以實現同樣的功能。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13408

更多內容可以參閱:http://www.softwhy.com/divcss/

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在實際的開發過程中,前端後臺協商好了統一的介面,就各自開始自己的任務了。這時候我有這麼一個 Ajax 請求需要從後臺獲取數據:$.ajax({ url: '/products/'}).done(function(res) { $('#result').html(res);});但是這個服務可能還.....
  • 各種瀏覽器之間的競爭的白熱化意味著越來越多的人現在開始使用那些支持最新、最先進的W3C Web標準的設備,以一種更具交互性的方式來訪問互聯網。這意味著我們終於能夠利用更強大更靈活的CSS來創造更簡潔,更好維護的瀏覽器前端代碼。現在讓我們來看一看一些也許你還不知道的讓人興奮的CSS 功能。 在CSS....
  • 滑鼠滑過鏈接出現信息框效果:在超鏈接中有一個自帶的效果,當滑鼠懸浮在鏈接之上的時候,能夠彈出提示框,使用title屬性就可以實現。代碼如下:螞蟻部落螞蟻部落創建於2012年,致力於前端知識的分享與交流。歡迎您,只有努力奮鬥才會有美好的未來。例子不夠美觀,這裡只是用來進行演示而已,代碼非常的簡單,這裡...
  • jquery操作單選鈕代碼示例:radio單選按鈕是最重要的表單元素之一,下麵介紹一下常用的幾個jquery對radio單選按鈕操作。一.取消選中:$(".theclass").each(function(){ if($(this).attr('checked')) { $(this).a...
  • js獲取url鏈接中的參數:url傳遞參數這是常識,這裡就不多介紹了,既然傳遞參數就要獲取參數的值,下麵就介紹一下如何實現此功能。代碼如下:function request(paras){ var url="softwhy.com?a=1&b=2"; var paraString=url....
  • 滑鼠懸浮實現鏈接背景變色效果:本章節分享一段代碼實例,它能夠實現滑鼠懸浮鏈接實現背景變色效果。代碼實例如下:螞蟻部落螞蟻部落以上代碼實現了我們的要求,當滑鼠懸浮設置背景色是利用了,鏈接偽類a:hover。原文地址是:http://www.softwhy.com/forum.php?mod=viewt...
  • 點擊最後一行可以實現行自增效果的表格代碼:現在任何事務都追求效率和人性化,當然網頁效果也是如此,如果一個可以編輯數據的表格,編輯到最後一行的時候,點擊可以自動添加一行,這樣算是一個比較人性化的效果,可以免去一絲勞頓之苦,下麵分享一段這樣的代碼。代碼如下:螞蟻部落[/size][size=2] ...
  • 如何禁止使用框架iframe引用網站頁面:很多網站喜歡引用外站的頁面,有的可能為了方便,有的可能喜歡對方網站,目的可能是多種多樣的,但是有些站長並不像自己的網頁被別人引用,下麵就簡單介紹一下如何實現此功能。方法一:if(top.location!==self.location){ top.loca....
一周排行
    -Advertisement-
    Play Games
  • 前言 推薦一款基於.NET 8、WPF、Prism.DryIoc、MVVM設計模式、Blazor以及MySQL資料庫構建的企業級工作流系統的WPF客戶端框架-AIStudio.Wpf.AClient 6.0。 項目介紹 框架採用了 Prism 框架來實現 MVVM 模式,不僅簡化了 MVVM 的典型 ...
  • 先看一下效果吧: 我們直接通過改造一下原版的TreeView來實現上面這個效果 我們先創建一個普通的TreeView 代碼很簡單: <TreeView> <TreeViewItem Header="人事部"/> <TreeViewItem Header="技術部"> <TreeViewItem He ...
  • 1. 生成式 AI 簡介 https://imp.i384100.net/LXYmq3 2. Python 語言 https://imp.i384100.net/5gmXXo 3. 統計和 R https://youtu.be/ANMuuq502rE?si=hw9GT6JVzMhRvBbF 4. 數 ...
  • 本文為大家介紹下.NET解壓/壓縮zip文件。雖然解壓縮不是啥核心技術,但壓縮性能以及進度處理還是需要關註下,針對使用較多的zip開源組件驗證,給大家提供個技術選型參考 之前在《.NET WebSocket高併發通信阻塞問題 - 唐宋元明清2188 - 博客園 (cnblogs.com)》講過,團隊 ...
  • 之前寫過兩篇關於Roslyn源生成器生成源代碼的用例,今天使用Roslyn的代碼修複器CodeFixProvider實現一個cs文件頭部註釋的功能, 代碼修複器會同時涉及到CodeFixProvider和DiagnosticAnalyzer, 實現FileHeaderAnalyzer 首先我們知道修 ...
  • 在軟體行業,經常會聽到一句話“文不如表,表不如圖”說明瞭圖形在軟體應用中的重要性。同樣在WPF開發中,為了程式美觀或者業務需要,經常會用到各種個樣的圖形。今天以一些簡單的小例子,簡述WPF開發中幾何圖形(Geometry)相關內容,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 在 C# 中使用 RabbitMQ 通過簡訊發送重置後的密碼到用戶的手機號上,你可以按照以下步驟進行 1.安裝 RabbitMQ 客戶端庫 首先,確保你已經安裝了 RabbitMQ 客戶端庫。你可以通過 NuGet 包管理器來安裝: dotnet add package RabbitMQ.Clien ...
  • 1.下載 Protocol Buffers 編譯器(protoc) 前往 Protocol Buffers GitHub Releases 頁面。在 "Assets" 下找到適合您系統的壓縮文件,通常為 protoc-{version}-win32.zip 或 protoc-{version}-wi ...
  • 簡介 在現代微服務架構中,服務發現(Service Discovery)是一項關鍵功能。它允許微服務動態地找到彼此,而無需依賴硬編碼的地址。以前如果你搜 .NET Service Discovery,大概率會搜到一大堆 Eureka,Consul 等的文章。現在微軟為我們帶來了一個官方的包:Micr ...
  • ZY樹洞 前言 ZY樹洞是一個基於.NET Core開發的簡單的評論系統,主要用於大家分享自己心中的感悟、經驗、心得、想法等。 好了,不賣關子了,這個項目其實是上班無聊的時候寫的,為什麼要寫這個項目呢?因為我單純的想吐槽一下工作中的不滿而已。 項目介紹 項目很簡單,主要功能就是提供一個簡單的評論系統 ...