Warum kleine Räume immer wieder zeigt, in meinen Web-Seiten nach oben?

StackOverflow https://stackoverflow.com/questions/134683

  •  02-07-2019
  •  | 
  •  

Frage

Dies könnte eine dumme Frage, aber wenn es eine bessere oder richtige Art und Weise, dies zu tun, ich würde es lieben zu lernen.

Ich habe über das ein paar Mal laufen, darunter vor kurzem, wo kleine Räume in der gerenderten Version meiner HTML-Seite angezeigt. Intuitiv glaube ich, sollen diese nicht da sein, weil außerhalb von Text oder Entitäten, die Formatierung von einer Seite des HTML sollte keine Rolle spielen, aber anscheinend tut es.

Was ich mich beziehe ist das - ich vom Client einig Photoshop-Datei auf, wie sie wollen, dass ihre Website zu suchen. Sie wollen es perfekt in dieser Datei das Bild im Grunde Pixel suchen.

Einer der Orte, in der Seite fordert eine Menüleiste, wo jeder tut das Ändern Bit auf Schweben, wirkt wie ein Hyperlink, usw. In der Photoshop-Datei ist dies eine lange Bar, so eine billige und einfache Möglichkeit, dies tut, ist nur dieses Segment in mehrere Bilder aufgeteilt und sie dann in der Datei nebeneinander platzieren.

So instinktiv ich es lag wie so aus (es gibt mehr zu ihm, aber das ist der Kern) 

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

und so weiter.

Das Problem ist, die Bilder haben diesen winzigen Raum zwischen ihnen, was nicht akzeptabel ist, da der Kunde dieser Sache pixelgenaue will (und es einfach nur schlecht aussieht).

Eine Möglichkeit, um es richtig zu machen, ist die Zeilenumbrüche zwischen den Bildern zu entfernen 

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

Welche Bilder gehen direkt gegeneinander antreten macht (der gewünschte Effekt), aber es macht die Linie unglaublich lang und der Code schwieriger zu warten (es hier hüllt in SO und dies ist eine vereinfachte Version - das wirkliche hat mehr Dateinamen und JavaScript bestreut in das Schweben zu tun).

Es scheint mir, dass dies nicht geschehen soll, aber es sieht aus wie der Wagenrücklauf in der HTML als einen kleinen leeren Raum wiedergegeben wird. Und dies in allen Browsern geschieht, sieht aus wie.

Bin ich richtig oder falsch zu denken, die beiden Schnipsel oben sollte das gleiche machen? Und gibt es etwas, was ich falsch mache? Vielleicht mit der falschen Codierung die Datei zu speichern? Sollte ich jede dieser Verbindungen machen ein perfekt positioniert, CSS-Element stattdessen?

War es hilfreich?

Lösung

Die Leerzeichen (Carriage Return enthielt) in der Regel als Raum in allen Browsern dargestellt werden.

Sie müssen die Elemente nacheinander setzen, aber Sie können einen Trick verwenden: 

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a>

Das sieht auch ein wenig hässlich, aber es ist immer noch besser als eine einzige Zeile. Sie könnten die Formatierung ändern, aber die Idee ist Zeilenumbrüche innerhalb der Elemente hinzuzufügen und nicht zwischen ihnen.

Andere Tipps

Ich weiß nicht, ob dies allgemein genug für Ihre Seite ist, aber man konnte Klasse diese besonderen a -Tags und schweben sie alle links, dann werden sie Haufen zusammen, egal, wie Sie Ihre HTML ist formatiert. 

<style>
    a.together {
        float:left;
    }
</style>

<a class='together' href="page1.html"><img src="image1.png" /></a>
<a class='together' href="page2.html"><img src="image2.png" /></a>
<a class='together' href="page3.html"><img src="image3.png" /></a>

Das ist ein Teil der HTML-Spezifikation - die Räume im Markup sind, so dass sie einen Teil des Dokuments betrachtet sind

.

Die einzigen anderen Optionen, die Sie haben, da Sie die Formatierung nicht mögen, ist die HTML-Tags zu brechen: 

  <a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a

, die meiner Meinung nach nicht wünschenswert ist, oder die HTML dynamisch erstellen -. Entweder über JavaScript oder ein Template-System und dynamische HTML mit

Der Grund ist einfach: In HTML Leerraum Angelegenheiten, aber nur einmal. Wiederholte Leerraum wird ignoriert, nur die erste gezeigt.

Der einzige zuverlässige Weg, dies zu vermeiden, ist, wie Sie getan haben, um keinen Leerraum zwischen Elementen setzen.

Wenn Tabelle basiert Layout würde geringer sein, als es derzeit ist, können Sie eine Null-Grenze, Null Füllseltabelle Ihre Elemente verwenden könnte auszurichten, während sie in separaten Zeilen im Quellcode haben.

Die Art, wie ich damit umgehen ist eine ungeordnete Liste zu verwenden, und macht jedes Bild / ein Element verknüpfen. Dann CSS verwenden, um jedes Element Inline anzuzeigen und und schweben sie nach links.

Dies wird Ihnen viel mehr Flexibilität, und das Markup sehr lesbar machen.

Das Verhalten, das Sie oben gezeigt ist wahr, wie der Browser Zeilenumbrüche als Raum behandelt. Um es zu beheben, können Sie es Stil wie so mit: 

a { display: block; float: left; }

Bitte beachten Sie, dass die obige Regel es für alle Links gilt, so dass Sie den Wähler auf bestimmte Elemente nur verengen könnten wollen, das heißt: 

#nav a { display: block; float: left; }

Wenn Sie vorhaben, eine Oberfläche mit Registerkarten auf einer Website zu tun, nehmen sich große Mühe, es richtig zu tun, und es wird sich lohnen. Es gibt viele Websites mit großen Beispielen für CSS Tab-Implementierungen. Betrachten wir eine von ihnen.

Dieses hat viele CSS + JavaScript / AJAX Registerkarten. Oder finden Sie unter diesen Satz von einfachen CSS Beispiele (einige Stil). Schließlich lesen Sie in diesem eigentlich hübsche kühl Tabs Generator rel="nofollow.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top