Textausrichtung in span-tags

[sikes]

Hallo,

folgender Code:

<ul>
  <li><span class="title">item 1
    </span><span class="pageNo">1</span>
  </li>
</ul>

CSS:
ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 210px;
 }
ul li {
 font-size: 12px;
 width: 210px;
 padding: 2px;
 }
.title {
 width: 80%;
 display: -moz-inline-box;
 display: inline-block;
 }
.pageNo {
 width: 20%;
 display: -moz-inline-box;
 display: inline-block;
 }

Ich hätte gerne, dass der Text in .pageNo rechtsbündig ausgerichtet wird, sprich am rechten Rand der Liste. Versucht habe ich es mit text-align: right (geht nur im IE) und mit margin-right: 0. Jmd ein Tipp, wie das gehen könnte? Vielen Dank

[Bobby]

Moin

In welchem Browser soll dein geposteter Code nicht funktionieren? Ich hab es mit 3 Browsern (IE6 IE7 und FF) getestet und jedesmal das gleiche richtige Ergebnis erhalten.

Gruß Bobby

[sikes]

Hi,

In welchem Browser soll dein geposteter Code nicht funktionieren?

Der Code an sich geht, nur die Textausrichtung nach rechts in .pageNo geht bei mir in FF 2 nicht.

mfg

[Bobby]

Moin

In welchem Browser soll dein geposteter Code nicht funktionieren?
Der Code an sich geht, nur die Textausrichtung nach rechts in .pageNo geht bei mir in FF 2 nicht.

Sorry hattes nicht richtig gesehen. Wie wärs wenn du dem .title und dem .pageNo ein

display:block;
float:left;

und dem .pageNo ein zusätzliches

text-align:right;

gibst. Dann müsstes doch eigentlich funktionieren und wie gewünscht aussehen.

Gruß Bobby

[wahsaga]

hi,

.pageNo {
width: 20%;
display: -moz-inline-box;
display: inline-block;

Die zweite Angabe überschreibt die erste.
Da der Firefox aber nur erstere versteht, erreichst du so im Firefox nicht das gewünschte.
Du könntest es andersherum probieren. Normale Browser sollten dann nur inline-block interpretieren, und die zweite Angabe als ihnen unbekannte ignorieren.

gruß,
wahsaga

[sikes]

hi,
Du könntest es andersherum probieren. Normale Browser sollten dann nur inline-block interpretieren, und die zweite Angabe als ihnen unbekannte ignorieren.

Macht keinen Unterschied, aber das Problem mit rechtsbündigem Ausrichten habe ich nach wie vor. Noch eine Idee?

mfg

[wahsaga]

hi,

Du könntest es andersherum probieren. Normale Browser sollten dann nur inline-block interpretieren, und die zweite Angabe als ihnen unbekannte ignorieren.

Macht keinen Unterschied, aber das Problem mit rechtsbündigem Ausrichten habe ich nach wie vor. Noch eine Idee?

Teste, ob du im FF das gewünschte Verhalten erreichst, wenn du _ausschliesslich_ -moz-inline-box als Angabe für display verwendest.

Wenn ja - ggf. Browserweiche/CSS-Hacks.

Wenn nein - alternativen Aufbau versuchen.

gruß,
wahsaga

[sikes]

hi,

Wenn nein - alternativen Aufbau versuchen.

geht leider nicht. Hast Du mir einen Tipp für einen alternativen Aufbau? Erreicht werden soll folgendes:

item     1
item     2
item     3

Ähnlich wie das Inhaltsverzeichnis eines Buches; die Zahlen sollen eben rechtsbündig angeordnet sein. Ich hatte es anfänglich mit einer Tabelle, das geht zwar, schien mir aber nicht die eleganteste Lösung zu sein.

danke

[wahsaga]

hi,

Hast Du mir einen Tipp für einen alternativen Aufbau?

Eine mögliche Alternative hat dir Bobby doch bereits genannt.

gruß,
wahsaga