HTML/CSS Texte der Listenelemente bündig ausrichten

[M3Y3R]

Hallo Leute,

ich habe mal wieder ein kleines Problemchen oder auch Verständnisproblem. Sei es wie es will, jedenfalls bekomme ich nicht das gewünschte Ergebnis.

Zu meinem Problem. Ich habe ein paar Menü-Einträge:

<ul class="menu">
   <a href="seite1.php"><li class="menu">Ich bin ein Link 1</li></a>
   <a href="seite2.php"><li class="menu">Ich bin ein Link 2</li></a>
   <a href="seite3.php"><li class="menu">Ich bin ein Link 3</li></a>
</ul>

Per Stylesheet lege ich nun folgendes fest:

 ul.menu{
     width: 100%;
     margin: 0px;
     padding: 0px;
 }
 
 li.menu{
     list-style-type: none;
 }

Das problem ist nun folgender. Da das Menü nicht all zu breit ist und auch nicht breiter gesetzt werden kann und einige Links größer sind als die Box, wird ein Umbruch erzeugt. Das heißt das menü sieht wie folgt aus:

>> Ich bin ein
Link

Wie bekomme ich es nun hin, dass der Text bündig ist, sprich aussieht wie hier (ohne die Punkte versteht sich!):

>> Ich bin ein
.....Link

Danke für eure Zeit und Hilfe!


MFG
Papenburger
=====================================================
EDIT:

Das ganze wurde nun wie folgt gelöst:

Menü-Einträge:

<ul class="menu">
    <a href="seite1.php"><li>Ich bin ein Link 1</li></a>
    <a href="seite2.php"><li>Ich bin ein Link 2</li></a>
    <a href="seite3.php"><li>Ich bin ein Link 3</li></a>
</ul>

Stylesheet:

ul.bew_Menu{
     list-style-position:    outside;
     list-style-image:        url('/images/raquo.png');
    width: 90%;
    margin: 0px;
    padding: 0px;
    float: right;
 }

Wie ihr seht, wird das nun mit einem Bild gemacht. Das heißt, der Punkt vor jedem Listenelement wird durch das Bild ersetzt. Dies ist zwar nicht die optimalste Lösung, aber es funktioniert wenigstens...

Hat jemand eine Idee, wie man das lösen kann, ohne Bilder einzufügen?
Also direkt mit dem » ? Die Anweisung "content:" in der Style-Definition macht hier keinen Sinn, weil dann der Text nicht mehr bündig wäre....


MFG
Papenburger

PS: Für weitere Lösungsvorschläge wäre ich dankbar

 

[perlini]

Hab mir das nicht genau angeschaut, aber dein HTML-Code ist falsch.

<ul>
 <li><a href="#">verlinkter Listenpunkt</a></li>
</ul>

 

[theHacker]

Ich hab jetzt zwar nicht die Zeit, das ausführlich zu testen, aber ich an deiner Stelle geh bei sowas mit Firebug ran. Damit kannst du genau den <ul>- und die <li>-Tags markieren und siehst im Browser den Bereich, den sie einnehmen und mittels welcher CSS-Angaben dieses Rendering zu Stande kommt.

Evtl. kann dir das helfen - weiß ned, ob du das meinst.
https://de.selfhtml.org/css/eigenschaften/anzeige/list_style_position.htm
https://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_position

Ansonsten eben mit width, margin, padding deinen Container so hinbiegen, dass der Umbruch nur da stattfindet, wo du ihn brauchen kannst. Den Listenpunkt kontrollierst du mit obiger Eigenschaft oder "verschiebst" ihn, indem du zwischen <ul> und <li> entsprechende margins und paddings verwendest.