Umbruch in Liste: Rollover mit Abstand zum Text. Abstand fehlt bei Umbruch

[Gast] Foren Web allgemein HTML und CSS / Stylesheets Umbruch in Liste: Rollover mit Abstand zum Text. Abstand fehlt bei Umbruch

Web allgemein

Themen

Beiträge

Moderatoren

Letzter Beitrag

HTML und CSS / Stylesheets

1193

6413

FSt

19. Dez 2022, 21:28

Vitus

matmax

Beiträge gesamt: 626

24. Mai 2011, 22:10
Beitrag # 1 von 2
Bewertung:
(1543 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo!

Ich möchte ein Hintergrundfarben-Rollover in einer Liste (Menü) mit einem definierten Abstand zum Text realisieren. Leider umbrechen manche Listen-/Menüpunkte und es ergibt sich folgendes Bild: Die zweite Zeile des umbrochenen Menüpunkts erhält nicht das gleiche padding nach links wie die erste Zeile (analog dazu das Ende der ersten Zeile).

Die Hintergrundfarbe soll nur hinter dem <a> (dem Text) erscheinen, also nicht das ganze <li> ausfüllen.
Wie kann ich das lösen?!

Hier der Code:

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Menütest</title> 
 
<style> 
ul { 
	width: 150px; 
	list-style-type: none;  
	font-family: Arial, Helvetica, sans-serif; 
	font-size:14px; 
	color:black; 
	border:blue thin solid; 
	padding:5px; 
} 
 
li { 
	margin:10px 0 10px 0; 
	border:green thin solid; 
} 
 
li a { 
	text-decoration:none; 
	border:aqua thin solid; 
} 
 
 
li a:hover { 
	color:white; 
	background-color:blue; 
	padding:1px 5px 1px 5px; 
} 
</style> 
 
</head> 
<body> 
 
<ul> 
    <li><a href="#">Menüpunkt</a></li> 
    <li><a href="#">Menüpunkt zweizeilig kaputt</a></li> 
    <li><a href="#">Menüpunkt</a></li> 
</ul> 
                
</body> 
</html>