Wie die vorherigen Antworten vorschlagen, könnten Sie float:left auf die menulinkboxaround setzen.
Es ist schwer zu sagen, von Ihrer Beschreibung der gewünschte Effekt, ich nehme an, Sie wollen das Menü mit 50px beide Seite der Links horizontal sein.
Mit dem Code, den Sie derzeit haben, erstreckt sich der Hover-Status nur in eine Richtung, auch wenn Sie nur angeben: Hover ist nicht wirklich so Tastatur freundlich wie es wäre, wenn Sie angegeben: Fokus.
Auch weil Sie die Höhe in px einstellen, wenn Sie die Schriftgröße erhöhen, wird der Text unten abgeschnitten. Wenn Sie die Pseudo-Selektoren auf der Verknüpfung nicht angeben, können Sie später auch Probleme in Internet Explorer verursachen.
Sie könnten auch den Code ein wenig aufräumen, um unnötige Klassen zu reduzieren und die Semantik des Menüs zu verbessern.
Zum Beispiel:
<style type="text/css">
ul.menu {
/* removing the browser defaults for margin padding and bullets */
margin: 0;
padding: 0;
list-style-type: none;
/* Now you have a sensible parent it is a good idea to put the font
family here, I have also added a fallback of sans-serif in the rare
case Helvetica and Verdana are not available on the users computer,
it might be best to set this on the body if you are using this font
site-wide
*/
font-family: Verdana, Helvetica, sans-serif;
/* To create symetry I am adding 25px to the right and left of the menu,
this will stay green even if the items inside are not
*/
padding: 0 25px;
background-color: green;
/* increacing the lineheight so the background color of the links does
not overflow the green of the menu behind it, for a simple menu like
this it is fine, a more complex or longer links that need to wrap I
suggest changing the method of implementation from display inline to
floating which is a bit more complex
*/
line-height:1.95;
}
/* because all the list items are inside this parent list you can use
the descendant selector to target them rather than adding a separate
class, you are saying all list items inside the unordered list that
has a class of menu
*/
ul.menu li {
/* telling the list items to behave like inline elements so they are
naturally on one line also removint the browser default margin and
padding
*/
display: inline;
margin: 0;
padding: 0;
}
ul.menu a:link,
ul.menu a:visited,
ul.menu a:hover,
ul.menu a:focus,
ul.menu a:active {
/* you can combine all your padding rules together in the order
Top Right Bottom Left, I remember this like it kinda spells TRouBLe :)
*/
padding: 5px 25px 5px 25px;
background-color: green;
/* setting the color to white because the default link color of blue
is not that visible against green
*/
color: white;
}
/* adding the :focus selector to make this more keyboard accessible */
ul.menu a:hover,
ul.menu a:focus {
background-color: red;
color: black;
}
ul.menu a:visited {
background-color: yellow;
color: black;
}
</style>
</pre>
<ul class="menu">
<!-- Putting these all on one line because we are making
them display:inline so the spaces get counted and there will
be a gap otherwise -->
<li><a href="asdf.gif">Link 1</a></li><li><a href="asdf.gif">Link 2</a></li><li><a href="asdf.gif">Link 3</a></li>
</ul>
ich dies in den letzten Versionen von FF, Opera und Safari getestet haben, und IE6 IE7 und IE8
<style type="text/css">
ul.menu {
margin: 0;
padding: 0;
list-style-type: none;
font-family: Verdana, Helvetica, sans-serif;
padding: 0 25px;
background-color: green;
/* overflow hidden clears the internal floated links and zoom 1
kicks IE into doing the same, I suggest you move the zoom: 1
into an IE stylesheet using conditional comments
*/
overflow: hidden;
zoom: 1;
}
ul.menu li {
display: inline;
margin: 0;
padding: 0;
}
ul.menu a:link,
ul.menu a:visited,
ul.menu a:hover,
ul.menu a:focus,
ul.menu a:active {
padding: 5px 25px 5px 25px;
background-color: green;
color: white;
/* setting the links to float left and giving them display block as
well explicitly, this is so that the vertical padding of 5px gets
applied, inline elements can only have horizontal margin and padding,
and since we are floating them they now take up 0 vertical height in
the document which is why we needed to clear the float on the
surrounding menu
*/
display: block;
float: left;
}
ul.menu a:hover,
ul.menu a:focus {
background-color: red;
color: black;
}
ul.menu a:visited {
background-color: yellow;
color: black;
}
</style>
<ul class="menu">
<li><a href="asdf.gif">Link 1</a></li><li><a href="asdf.gif">Link 2</a></li><li><a href="asdf.gif">Link 3</a></li>
</ul>
Diese zweite Methode ist viel zuverlässiger, beschäftigt sich mit Das Wrapping von Links ist schöner und ist im Allgemeinen eine bessere Lösung, aber ein bisschen schwieriger zu erklären.
Wenn Sie das Menü nicht wollte einfach so lange die volle Breite des Bildschirms zu füllen, wie der Text nach oben nimmt, und zwar unabhängig davon, welche Methode Sie oben verwenden, schlage ich vor, Sie setzen float: left und clear: both auf der ul.menu die sollte schrumpfen
die Breite aufzunehmen es braucht ich hoffe, die
Code
Wie lautet der HTML-Code für dieses Menü? Wenn man das sieht, wird es leichter zu sagen, was vor sich geht. – aem