Question

我很好奇关于定位<li>属性的最佳路线是什么。我已经接管了创建该网站的前任员工的网站管理员职责，我发现这比编辑自己要困难得多，因为每个人都有不同的处理方式。

我遇到的问题是： enter image description here

在我发布的屏幕截图中，Internet Explorer已将“联系我们”的“我们”部分推到下一行。这一切都出现在Chrome / Firefox的一行中，但这需要修复。我可以尝试更改字体（因为我知道IE中的字体渲染导致了问题），但是我还需要添加两个菜单选项。

我想要做的是设置它，这样无论浏览器如何，所有内容都将按照下图所示进行定位：

enter image description here

页脚导航菜单的代码是PHP包含，目前读取如下：

<div id="footer_nav">


    <ul class="footer_nav_list">

            <li class="rightindent">&copy;2014 My Company, LLC&nbsp; &nbsp; All Rights Reserved.</li>

            <li><a href="index.php">HOME&nbsp;|&nbsp;</a></li>

            <li><a href="solutions.php">PAGE 1&nbsp;|&nbsp;</a></li>

            <li><a href="solutions2.php">PAGE 2&nbsp;|&nbsp;</a></li>

            <li><a href="support.php">SUPPORT&nbsp;|&nbsp;</a></li>

            <li><a href="careers.php">CAREERS&nbsp;|&nbsp;</a></li><br />

            <li><a href="contact.php">CONTACT US&nbsp;|&nbsp;</a></li>

            <li><a href="sitemap.php">SITEMAP&nbsp;|&nbsp;</a></li>                      

     </ul>     


</div>

这包括调用包含以下代码的CSS样式表：

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;

vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* STRUCTURE BEGINS */
#footer_nav {
background-color: #2f2f2f;
background-image: url(../images/productsMain/footerBg.png);
background-repeat: repeat-x;
width: 940px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;
float: left;
}
#footer_nav .footer_nav_list {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #999;
list-style-type: none;
padding-top: 35px;
}
#footer_nav .footer_nav_list ul {
text-decoration: none;
display: inline;
list-style-type: none;
margin-top: 15px;
}
#footer_nav .footer_nav_list li  {
display: inline;
}
#footer_nav .footer_nav_list li a {
color: #999;
text-decoration: none;
padding-top: 25px;
padding-left: 2px;
}
#footer_nav .footer_nav_list li a:hover {
color: #FFF;
}
#footer_nav .footer_nav_list .rightindent {
padding-right: 25px;
}

我尝试的所有东西都会反击，当这个页脚出现在每个页面上时，它在我的本地主机之外留下了很少的试验和错误空间。

Answer 1

在联系我<br/>后删除<li>。看到这个小提琴：http://jsfiddle.net/4Czs4/1/此外，您可能会在向页脚添加更多元素后再次遇到问题，因此我已在您的CSS中设置width: 100%。您可以删除此行并取消注释旧的width: 940px;。

编辑：根据我的想法更新了小提琴：http://jsfiddle.net/4Czs4/2/它应该在IE中呈现您需要的方式。我仍然会取出<br/>，并在需要时将其翻转。

定位<li>属性？</li>

1 个答案: