如何制作等宽链接？ [英] How to make equal-width links?
问题描述
我一直在尝试创建一个简单的垂直导航栏，使用（建议使用
）超链接的无序列表（UL）。我想要悬停
效果，所以我必须自己设置链接的样式。
ul.links a：link，ul.links a：访问{
颜色：#FFFFFF;
背景颜色：＃000000;
}
ul .links a：hover，ul.links a：active {
color：＃FF0000;
background-color：#FFFFFF;
我的问题是因为链接文本长度不同，
背景的宽度也会有所不同，给
右手边带来可怕的粗糙效果。我已经看到这样做很漂亮（但现在找不到一个
的例子）。有什么建议吗？
-
####################
## PH，伦敦
####################
I''ve been trying to create a simple vertical navigation bar, using (as
recommended) an unordered list (UL) of hyperlinks. I''d like to have a hover
effect, so I have to style the links themselves.
ul.links a:link, ul.links a:visited {
color: #FFFFFF;
background-color: #000000;
}
ul.links a:hover, ul.links a:active {
color: #FF0000;
background-color: #FFFFFF;
My problem is that because the link text length varies, the width of the
background also varies, giving an awful ragged effect on the
right-hand-side. I''ve seen this done beautifully (but can''t now find an
example). Any suggestions?
--
####################
## PH, London
####################
推荐答案
2004年11月22日星期一10:29:02 +0000（UTC），Philip Herlihy
< fo ****** @ herlihy.eu.veil。 COM>写道：
On Mon, 22 Nov 2004 10:29:02 +0000 (UTC), Philip Herlihy
<fo******@herlihy.eu.veil.com> wrote:
我一直在尝试创建一个简单的垂直导航栏，使用（如推荐的那样）超链接的无序列表（UL）。我想要有一个
悬停
效果，所以我必须自己设置链接的样式。
ul.links a：link，ul.links a：visited {
颜色：#FFFFFF;
背景颜色：＃000000;
}
ul.links a：悬停，ul.links a：活跃{
颜色：＃ FF0000;
background-color：#FFFFFF;
我的问题是因为链接文本长度不同，
背景的宽度也会有所不同，给人一种可怕的粗糙效果
右手边。我已经看到这样做很漂亮（但现在找不到一个
的例子）。有什么建议吗？
I''ve been trying to create a simple vertical navigation bar, using (as
recommended) an unordered list (UL) of hyperlinks. I''d like to have a
hover
effect, so I have to style the links themselves.
ul.links a:link, ul.links a:visited {
color: #FFFFFF;
background-color: #000000;
}
ul.links a:hover, ul.links a:active {
color: #FF0000;
background-color: #FFFFFF;
My problem is that because the link text length varies, the width of the
background also varies, giving an awful ragged effect on the
right-hand-side. I''ve seen this done beautifully (but can''t now find an
example). Any suggestions?
如何在< li>上设置宽度？并设置< a>的宽度和所有
必要的假类100％？
-
博客| < http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
Webontwerp | < http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
Zweefvliegen | < http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
How about setting a width on <li> and setting the width for <a> and all
the pseudoclasses as necessary on 100%?
--
Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
Philip Herlihy写道：
< snip>
Philip Herlihy wrote:
<snip>
ul.links a：link，ul.links a：visited {
颜色：#FFFFFF;
background-color：＃000000 ;
}
< snip>
我的问题是因为链接文字长度不一，
背景的宽度也有所不同，对
右侧产生了可怕的破坏性影响。我已经看到这样做很漂亮（但现在找不到一个
的例子）。有什么建议吗？
ul.links a:link, ul.links a:visited {
color: #FFFFFF;
background-color: #000000;
}
<snip>
My problem is that because the link text length varies, the width of the
background also varies, giving an awful ragged effect on the
right-hand-side. I''ve seen this done beautifully (but can''t now find an
example). Any suggestions?
ul.links {
宽度：10em;
}
-
Philip Ronan
ph ** *********@virgin.net
（如果通过电子邮件回复，请删除z）
ul.links {
width: 10em;
}
--
Philip Ronan
ph***********@virgin.net
(Please remove the "z"s if replying by email)
Philip Herlihy写道：
Philip Herlihy wrote:
我一直试图创建一个简单的垂直导航栏，使用（推荐）无序列表（UL）
超链接。我想要有悬停效果，所以我必须自己设置链接的样式。
ul.links a：link，ul.links a：visited {
颜色：#FFFFFF;
background-color：＃000000;
}
ul.links a：hover，ul.links a：active {
颜色：＃FF0000;
background-color：#FFFFFF;
我的问题是因为链接文本长度不同，背景的宽度也会有所不同，给人一种可怕的衣衫褴褛的影响右手边。我已经看到这件事完美了（但现在找不到一个例子）。
请参阅sig中的链接;-)
有什么建议吗？
I''ve been trying to create a simple vertical navigation
bar, using (as recommended) an unordered list (UL) of
hyperlinks. I''d like to have a hover effect, so I have to
style the links themselves.
ul.links a:link, ul.links a:visited {
color: #FFFFFF;
background-color: #000000;
}
ul.links a:hover, ul.links a:active {
color: #FF0000;
background-color: #FFFFFF;
My problem is that because the link text length varies, the
width of the background also varies, giving an awful ragged
effect on the right-hand-side. I''ve seen this done
beautifully (but can''t now find an example).
See link in sig ;-)
Any suggestions?
设定宽度（在ems）到< li>元素，并设置< a>
元素来显示：block;宽度：100％。
-
Els http://locusmeus.com/
Sonhos vem。 Sonhos v？o。 Orestoébritfeito。
- Renato Russo -
现在玩：Deep Purple - Burn
Set a width (in ems) to the <li> element, and set the <a>
element to display:block; width:100%.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos v?o. O resto é imperfeito.
- Renato Russo -
Now playing: Deep Purple - Burn
这篇关于如何制作等宽链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
