为什么有链接的文字和无链接的文字在水平方向对不齐？该怎么解决
日期：2014-05-17 浏览次数：20738 次
为什么有链接的文字和无链接的文字在水平方向对不齐？
效果如下：
问题所在：有链接和无链接的文字无法水平对齐。
HTML结构：
相关CSS文件：
------解决方案--------------------
效果如下：
问题所在：有链接和无链接的文字无法水平对齐。
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文件：
- 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;}
------解决方案
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
