0

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

这是我的代码：

nav.PgHdrMenu{ 高度：35px; 浮动：对；a{ 文字装饰：无；字母间距：-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>
4

1 回答 1

1

您确实忘记使用}.

例如：

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

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

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

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

于 2012-05-09T21:48:11.020 回答