处理inline元素之间换行产生的空白_html/css_WEB-ITnose
Jun 21, 2016 am 09:01 AM
图片来自网络
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>
Nach dem Login kopieren - 将父级font-size置0,行内元素再恢复字体大小。这种方式是本人最喜欢的,不是因为它貌似"高大上",而是因为它揭开了产生问题的原理。
- 利用注释进行代码排版,例如以下代码:
<ul> <li>Item content</li><!----><li>Item content</li><!----><li>Item content</li></ul>
Nach dem Login kopieren - 使用返回标签,类似上一种办法,代码如下:
<ul> <li>Item content</li ><li>Item content</li ><li>Item content</li></ul>
Nach dem Login kopieren - 利用css 否定边距,例如以下代码:这种方法是最差的,因为这很有可能为了解决问题而增加了新问题的风险,同时降低了强壮性和可维护性。解决方案都经过了测试,建议采用第一种和第三种。
.inline-block-list li { margin-left: -4px;}
Nach dem Login kopieren
本文通过Segmentfault,参考了文章Remove Whitespace Between Inline-Block Elements.

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?

Was sind die Sicherheitsauswirkungen der Verwendung von IFRames und wie kann ich sie mildern?

Wie benutze ich den HTML5 & lt; Meter & gt; Element zur Anzeige numerischer Daten innerhalb eines Bereichs?

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?

Wie verwende ich HTML -Links effektiv für Navigation und SEO?
