li 標籤渲染時的空隙問題

2021-10-05 14:37:04 字數 760 閱讀 2490

在製作頁面的時候,有時我們需要將li的內容進行橫向排版,在設定li標籤display:inline-block;屬性後,li之間出現大約8px的空白間隙,這是怎麼回事呢?

如該圖所示

上圖**

"en">"tag">

.tag

.tag li

.tag1

.tag2

.tag3

原因分析:瀏覽器的預設行為是把inline元素間的空白字元(空格換行tab)渲染成乙個空格,也就是我們上面的**< li>換行後會產生換行字元,而它會變成乙個空格,當然空格就占用乙個字元的寬度。

解決辦法:

"tag">

.tag ul

.tag ul li

需要的結果展示:

第一次週報被問及的question,當時由於在問之前剛好檢視過 so…

div內li標籤間距 li標籤的間距問題及編碼方式

新建乙個簡單的html測試檔案,下面來測試ul li標籤 example source code 測試一,定義css為如下 效果如下 example source code body ulul li ul li a 發現在ie5和ie5.5下左邊都產生了空白,並且在ie5下,li之間的行距產生空白,...

疑難總結 input標籤出現的莫名空隙問題

今天在做乙個專案的登陸介面時,發現input文字框始終比父元素低一截,如圖 但在往裡輸入字的時候,這個空隙卻消失了!網上找了很多辦法,終於找到解決方法 如果給div和input分別新增不同的背景色,會發現input上方會出現一段空隙,即便二者的內外邊距以及邊框和輪廓都設定為0,依然存在。除錯過程 將...

html 中的LI標籤

2011 07 22 20 10 9397人閱讀 收藏舉報 html cssfloat class 文件瀏覽器 第一步 編寫橫向選單的html 架構 請將以下 新增到html文件的導航欄區域中。第二步 編寫css 1 設定公共樣式 請將以下css 新增到html文件的 標籤範圍中。大家都知道,好了,...