为什么有链接的文字和无链接的文字在水平方向对不齐？该怎么解决

为什么有链接的文字和无链接的文字在水平方向对不齐？
效果如下：
问题所在：有链接和无链接的文字无法水平对齐。
HTML结构：

HTML code

<div id="frame_top">    <div id="logo"><img src="{$__TPL__}/images/logo.gif" /></div><!-- /logo-->    <ul id="nav">        <li class="on">系统</li>        <li>用户</li>        <li>插件</li>    </ul><!-- /nav-->    <div id="opt"><em>设置▼ | <a href="{$__URL__}/logout.html">注销</a></em></div><!-- /opt--></div><!-- /frame_top-->

CSS code

/*CSS reset*/html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size:100%; text-align: left; vertical-align:middle;}a img {border:none;}table {border-collapse: collapse; border-spacing: 0; width:100%;}input,textarea {margin:0;}ul,li{list-style:none; list-style-position:outside;}/*--- Link Styles ---*/a:link, a:visited{color:#000; text-decoration:none;}a:hover, a:active{color:#F00; text-decoration:none;}#frame_top{position:absolute; top:0; left:0; right:0; height:40px; background:url(../images/bg_01.png) bottom repeat-x;}#logo{position:absolute; left:0; top:0; border-bottom:0; width:220px;}#nav{position:absolute; top:0; left:220px; right:100px; bottom:0; overflow:hidden;}ul#nav{}ul#nav li{line-height:40px; padding:0 10px; display:inline-block; color:#FFF; font-size:18px; cursor:pointer;}#nav .on{background:#009;}#opt{position:absolute; top:0; right:0; bottom:0; width:100px; text-align:center; padding-top:8px;}#opt em{-webkit-border-radius:4px; -moz-border-radius:4px; padding:4px; background:#CCC; font-size:12px; font-style:normal;}

CSS code

/*CSS reset*/html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size:100%; text-align: left; vertical-align:middle;}a img {border:none;}table {border-collapse: collapse; border-spacing: 0; width:100%;}input,textarea {margin:0;}ul,li{list-style:none; list-style-position:outside;}/*--- Link Styles ---*/a:link, a:visited{color:#000; text-decoration:none;}a:hover, a:active{color:#F00; text-decoration:none;}#frame_top{position:absolute; top:0; left:0; right:0; height:40px; background:url(../images/bg_01.png) bottom repeat-x;}#logo{position:absolute; left:0; top:0; border-bottom:0; width:220px;}#nav{position:absolute; top:0; left:220px; right:100px; bottom:0; overflow:hidden;}ul#nav{}ul#nav li{line-height:40px; padding:0 10px; display:inline-block; color:#FFF; font-size:18px; cursor:pointer;}#nav .on{background:#009;}#opt{position:absolute; top:0; right:0; bottom:0; width:100px; text-align:center; padding-top:8px; line-height:22px;}#opt em{-webkit-border-radius:4px; -moz-border-radius:4px; padding:4px; background:#CCC; font-size:12px; font-style:normal; line-height:22px;}
[解决办法] 
 
建议CSS reset还是自己写的好。。靠得住。