Question

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

这是我的代码：

nav.PgHdrMenu { 身高：35px; 漂浮：对; 一个{ text-decoration：none; 字母间距：-1px; 颜色：@darkGrey; padding-right：6px;“

&: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

你确实忘记了＆＃34;关闭＆＃34;您的CSS定义为}。

例如：

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

无效是因为您没有关闭您打开的{以定义ul元素的样式。改为：

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

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

<li>在IE7中堆叠</li>

1 个答案: