2011-01-11 2 views
1

I'm using will_paginate und es produces pagination links dass amount zum folgenden:How zu progressively enhance inline block pagination links mit respect zum spaces zwischen der links

<a href="?page=2">2</a> <a href="?page=3">3</a> 

There heißt whitespace generated zwischen der Seite Links. Das macht Sinn. Wie es in der Dokumentation heißt, funktioniert es gut in textbasierten Browsern und Spidern (obwohl ich intuitiv nicht verstehe, warum das der Fall ist). Wunderbar.

Ich möchte die Links als Gruppe zu zentrieren. Der einzige Weg (ich weiß davon), dies zu erreichen, besteht darin, sie zu Inline-Elementen zu machen und ihr Eltern-Element text-align: center; zu geben.

Aber ich möchte auch eine bessere Kontrolle über den Raum zwischen den Elementen haben.

So zusammenzufassen, hier sind meine schön haves:

  • Leerzeichen zwischen Links
  • Links kollektiv
  • Feinabstimmung (Pixelebene) Steuerung für den Abstand zwischen Links
  • zentriert

Ich kann mir ein paar Möglichkeiten vorstellen:

  • refactor die Paginierung Links in eine ungeordnete Liste, so dass Nicht-Grafik-Browser zumindest die Unterscheidbarkeit zwischen den Verbindungen unabhängig von den Leerzeichen zwischen ihnen
  • setzen das übergeordnete Element macht font-size: 0px; zu haben und dann erklären ausdrücklich, die Schriftgröße der einzelnen Links

Das spricht für mich beide als weniger als ideal. Der erste erfordert viel Fremdmarkierung und ist meiner Ansicht nach semantisch schlecht. Die zweite scheint etwas hetzisch zu sein.

Gibt es eine Lösung, die meinen Wünschen ohne zusätzliche Probleme besser entspricht? Vielleicht etwas wie eine CSS-Anweisung, um Whitespace oder etwas zu ignorieren.

Antwort

1

Was Schwimmer auf die Links, über die Verwendung und schweben sie in einem Feld, das dann ausgerichtet Zentrum:

http://jsfiddle.net/AnN9n/1/

+0

Genius! Was für eine wundervolle Idee. Dies erfüllt alles, was ich benötige. Meine kleine semantische Revision ersetzt das überflüssige 'clear: both;' - Element mit einem 'overflow: hidden;' im Elternteil, um den Fluss zu begrenzen. http://jsfiddle.net/AnN9n/2/ –

+0

Brilliant! Danke für die Korrektur, wir haben beide heute etwas Neues gelernt :) – Bazzz

Verwandte Themen