使用字体时jQuery未对齐
我正在制作一个简单的菜单，但我不知道为什么当我使用serif以外的字体时，它没有正确地对齐到右侧。
当然，这是嵌入到其他一些源代码中的，所以仅仅告诉我“你为什么用这些东西来制作一个右对齐的链接列表？”是没用的。
<style type="text/css">
html, body {
overflow-x:visible;
}
body {
margin:0;
padding:0;
background:#111;
}
ul#menu {
margin-top: 30px;
padding: 0px;
list-style: none;
font-size: 1.1em;
clear: both;
float: right;
width: 150px;
padding-right:20px;
}
ul#menu li {
margin: 0;
padding: 0;
overflow: hidden;
float: right;
height:40px;
}
ul#menu a, ul#menu span {
padding: 10px 20px;
float: left;
text-decoration: none;
text-transform: none;
clear:none;
position:relative;
height: 20px;
line-height: 20px;
}
ul#menu a {
padding-right:20px;
border-bottom:0;
margin-right:-300px;
color: #a40800;
}
ul#menu span {
display:block;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#menu li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
$("#menu li").each( function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
var width = $(this).find("a").outerWidth();//Find the width of the link
$(this).find("span, a").css({
'left' : '-'+width+'px',
'color' : '#a0c0f0',
'font-family' : 'serif'
});
}
);
});
</script>
</head>
<body>
<ul id="menu">
<li>
<a href="#item1">asdqwe</a>
</li>
<li>
<a href="#item2">asdqaesd</a>
</li>
<li>
<a href="#item3">xcvsd</a>
</li>
<li>
<a href="#item4">qweasd</a>
</li>
<li>
<a href="#item5">ddfgdfgrwe</a>
</li>
</body>
如果您将'font-family'：'serif'更改为'font-family'：'Arial'（或其他任何我猜测的字体），则不会再对齐。
任何线索/修复？
提前致谢
来源：本教程的改编
第一个答案后编辑：好吧，我想它解决了Arial。 问题是我正在使用@ font-face：
@ font-face {font-family：'QuicksandLight'; src：url（'Quicksand_Light-webfont.eot'）; src：url（'Quicksand_Light-webfont.eot？#iefix'）格式（'embedded-opentype'），url（'Quicksand_Light-webfont.woff'）格式（'woff'），url（'Quicksand_Light-webfont.ttf' ）格式（'truetype'），url（'Quicksand_Light-webfont.svg＃QuicksandLight'）格式（'svg'）; font-weight：normal; font-style：normal; }
现在，添加font-family：'QuicksandLight'; 到ul＃菜单不能解决问题了。
下一步应该是什么？ 谢谢你的回答:)
在调用outerWidth()来获取链接的宽度之前，您需要设置所需的字体，因为更改字体会更改宽度。
您可以通过将.css()调用的那部分移动到outerWidth() .css()调用的上方来完成此outerWidth() ，但最好不要使用Javascript来更改字体，只需在CSS中设置所需的字体即可。
您使用@font-face字体时@font-face听起来像浏览器在jQuery运行时尚未加载字体。 尝试将您的jQuery代码更改为在$(window).load上运行，而不是$(document).ready以确保浏览器在脚本运行之前完成加载。