Question

我在IE7中遇到一个非常基本的问题，我似乎无法修复。如果您查看此页面：http://vitaminjdesign.com/IAM/company/您会注意到IE7中的垂直导航（ul id =“leftcol”）显示不正确。每个单词都出现在自己的行上。这是我的HTML /。 CSS：

<ul id="leftcol">
    <li><a class="active" href="#">Company Overview</a></li>
    <li><a href="#">Why Choose Parker?</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">Financing Promotions</a></li>
    <li><a href="#">Licensing & Credentials</a></li>
</ul>

ul#leftcol{float:left; width:185px; position:relative; z-index:10;}
ul#leftcol li{float:right; clear:right; margin-bottom:14px; list-style:none; list-style-image:none; text-align:right; line-height:1.3; }
ul#leftcol li a{color:#505050; text-decoration:none; font-size:15px; float:right;}
ul#leftcol li a.active,ul#leftcol li a:hover{color:#89b060;}

有什么想法吗？

Answer 1

从以下

中删除clear:right;

ul#leftcol li{float:right;margin-bottom:14px; list-style:none; list-style-image:none; text-align:right; line-height:1.3; }

Answer 2

尝试添加

ul#leftcol li a {
   white-space: nowrap;
}

你也可以给你一个固定宽度的li元素。

或者某些显示属性也可以像display: inline;

一样

IE7调试问题 - <li> </li>中的单词分解

2 个答案: