前の回答が示唆したように、menulinkboxaroundにfloat:leftを入れることができます。
あなたの説明から所望の効果を伝えるのは難しいです。リンクの両側に50pxの水平になるようにしたいと思っています。
あなたが現在持っているコードでは、ホバリング状態は一方向にのみ伸びます。指定したとおりです。ホバリングは、指定した場合と同じようにキーボードフレンドリーではありません。
また、フォントサイズを大きくすると高さがpxに設定されるので、テキストが一番下に切り取られます。リンク上に擬似セレクタを指定しないと、後でInternet Explorerで問題が発生する可能性があります。
また、不要なクラスを減らしてメニューのセマンティクスを改善するために、コードを少しきちんと整理することもできます。例えば
：私はFF、オペラとSafariの最近のバージョンでこれをテストしている
<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>
、およびIE6 IE7と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>
この第二の方法は、はるかに信頼性がある、と扱いますリンクをより素早くラッピングし、一般的にはより良い解決策ですが、説明するのは少し難しいです。
あなたは関係なく、あなたが上記の使用している方法の、私はあなたがいるべきul.menuにfloat: leftとclear: bothを置く提案、メニューは同じように長いテキストが占めるように、画面の幅いっぱいを埋めたくなかった場合それは私がこのことができます願ってい
を取る必要がある幅に縮小
以下
このメニューのHTMLは何ですか？それを見れば、何が起こっているのかを簡単に伝えることができます。 – aem