Heim Web-Frontend HTML-Tutorial 处理inline元素之间换行产生的空白_html/css_WEB-ITnose

处理inline元素之间换行产生的空白_html/css_WEB-ITnose

Jun 21, 2016 am 09:01 AM

图片来自网络

inline, inline-block元素之间的换行符会造成类似空格的空白。不知道你遇到过没?比如以下代码:

<a>1</a><a>2</a>
Nach dem Login kopieren

这种问题对布局影响不大,容易被忽略。但是某些极端情况就会把这个问题放大。例如以下代码:

<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>
Nach dem Login kopieren

这样一行的结构,精确的分配了行内元素的宽度,而换行产生的空白的影响被放大了。如何解决这种问题呢?

  1. 选用浮动的block代替inline-block, 因为曾经要处理IE6对inline-block的兼容性,养成了不适用inline-block的习惯,所以第一个想到这种方案。
  2. 编码时不使用换行,例如以下代码:
    <ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>
    Nach dem Login kopieren
    这种方法没有解决问题,而是规避了问题。这是最简单而不会带来任何影响的方法,但是之后其他人很容易排版你的代码从而导致问题,明显这种方法的可维护性太低。
  3. 将父级font-size置0,行内元素再恢复字体大小。这种方式是本人最喜欢的,不是因为它貌似"高大上",而是因为它揭开了产生问题的原理。
  4. 利用注释进行代码排版,例如以下代码:
    <ul>   <li>Item content</li><!----><li>Item content</li><!----><li>Item content</li></ul>
    Nach dem Login kopieren
  5. 使用返回标签,类似上一种办法,代码如下:
    <ul> <li>Item content</li  ><li>Item content</li ><li>Item content</li></ul>
    Nach dem Login kopieren
  6. 利用css 否定边距,例如以下代码:
    .inline-block-list li { margin-left: -4px;}
    Nach dem Login kopieren
    这种方法是最差的,因为这很有可能为了解决问题而增加了新问题的风险,同时降低了强壮性和可维护性。解决方案都经过了测试,建议采用第一种和第三种。

    本文通过Segmentfault,参考了文章Remove Whitespace Between Inline-Block Elements.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was ist der Zweck des & lt; Fortschritts & gt; Element? Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Was ist der Zweck des & lt; datalist & gt; Element? Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Was ist der Zweck des & lt; Meter & gt; Element? Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Mar 20, 2025 pm 05:56 PM

In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Mar 20, 2025 pm 06:05 PM

Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.

Ist HTML für Anfänger leicht zu lernen? Ist HTML für Anfänger leicht zu lernen? Apr 07, 2025 am 12:11 AM

HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.

Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Apr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

Was ist ein Beispiel für ein Start -Tag in HTML? Was ist ein Beispiel für ein Start -Tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.

See all articles