<li>堆积在IE7中

Question

我在水平显示li时遇到问题。 我通过论坛阅读并尝试了一些建议的解决方案，但没有帮助。 我在这里附加我的代码，有人可以帮助我水平导航此导航（并在整个浏览器中兼容）。

这是我的代码：

nav.PgHdrMenu {高度：35像素； 浮动：正确； a {文本修饰：无； 字母间距：-1px； 颜色：@darkGrey; padding-right：6像素；”

&:hover{
  color: @mainColor;
    }
 }

 ul{
padding-top:10px;
width:100%;
float:right;

li{
   list-style-type: none;
   float: right;
   margin-left: 5px;
   display: block; 

a{
  text-decoration: none;
  color: #f1f1f1;
  padding: 7px;
  border-right: 1px solid #1686a2;
  background: #1686a2;
  background: -webkit-gradient(linear, left top, left bottom, from(#1686a2), to(@darkGrey)); 
  background: -moz-linear-gradient(top,  #1686a2,  @darkGrey);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1686a2', endColorstr='@darkGrey', GradientType=0);

-moz-border-radius:5px;
    -webkit-border-radius:5px;
border-radius:5px;


     &:hover{
   background: #1686a2;
   background: -webkit-gradient(linear, left top, left bottom, from(@darkGrey), to(#1686a2)); 
   background: -moz-linear-gradient(top,  @darkGrey, #1686a2);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@darkGrey', endColorstr='#1686a2', GradientType=0);
    color:@lightGrey;
    }
}

     &:last-child > a{// get rid of last right-margin
 border: none;
        }
}
 }

HTML标记：

<nav class=PgContentMenu >
<ul>
  <li>
    <a href="index.html">Home</a>
  </li>
  <li>
    <a href="about.html">About Us</a>
  </li>
  <li>
    <a href="product.html">Products</a>
  </li>
 </ul>
</nav>

Answer 1

您确实忘记了使用} “关闭” CSS定义。

例如：

ul{
padding-top:10px;
width:100%;
float:right;

无效，因为您没有关闭{来定义ul元素的样式。 改成：

ul
{
    padding-top:10px;
    width:100%;
    float:right;
}

检查所有定义，您确实忘记了关闭大多数定义。 希望我能给您一个小的建议：我们都忘记关闭一个开放的花括号（即使没有深层嵌套），这就是为什么好的缩进可以帮助您在很大程度上避免这些错误的原因。 此外，如果您仅将开括号放在一行上（例如在我的第二个示例中），您将以更清晰的方式看到该块 。 它只是编码样式，但可以节省大量时间，并使您的代码更加清晰（这是90％的个人喜好）。