处理inline元素之间换行产生的空白_html/css_WEB-ITnose
图片来自网络
inline, inline-block元素之间的换行符会造成类似空格的空白。不知道你遇到过没?比如以下代码:
<a>1</a><a>2</a>
这种问题对布局影响不大,容易被忽略。但是某些极端情况就会把这个问题放大。例如以下代码:
<ul> <li>Item content</li> <li>Item content</li> <li>Item content</li></ul><style>li{ width:33.3%; display:inline-block; background:#abc; }</style>
这样一行的结构,精确的分配了行内元素的宽度,而换行产生的空白的影响被放大了。如何解决这种问题呢?
- 选用浮动的block代替inline-block, 因为曾经要处理IE6对inline-block的兼容性,养成了不适用inline-block的习惯,所以第一个想到这种方案。
- 编码时不使用换行,例如以下代码:这种方法没有解决问题,而是规避了问题。这是最简单而不会带来任何影响的方法,但是之后其他人很容易排版你的代码从而导致问题,明显这种方法的可维护性太低。
<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>
登入後複製 - 将父级font-size置0,行内元素再恢复字体大小。这种方式是本人最喜欢的,不是因为它貌似"高大上",而是因为它揭开了产生问题的原理。
- 利用注释进行代码排版,例如以下代码:
<ul> <li>Item content</li><!----><li>Item content</li><!----><li>Item content</li></ul>
登入後複製 - 使用返回标签,类似上一种办法,代码如下:
<ul> <li>Item content</li ><li>Item content</li ><li>Item content</li></ul>
登入後複製 - 利用css 否定边距,例如以下代码:这种方法是最差的,因为这很有可能为了解决问题而增加了新问题的风险,同时降低了强壮性和可维护性。解决方案都经过了测试,建议采用第一种和第三种。
.inline-block-list li { margin-left: -4px;}
登入後複製
本文通过Segmentfault,参考了文章Remove Whitespace Between Inline-Block Elements.

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

如何在瀏覽器上使用JavaScript區分關閉標籤頁和關閉整個瀏覽器?在日常使用瀏覽器的過程中,用戶可能會同時�...
