html - 菜单栏不整齐

我想做一个菜单栏。这是我的代码：

<html>
<head>
<style>
#reportingmenunav {
    margin: 0;
    padding: 0;
}

#reportingmenunav ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
}

#reportingmenunav li {
   margin: 0;
   padding: 0;
   list-style-type: none;
   border: 1px solid black;
   width: 50px;
}
</style>
</head>

<body>
<div id="reportingmenunav">
    <ul>
       <li>A1
            <ul>
                <li><a href="#">A2</a></li>
                <li><a href="#">A3</a></li>
           </ul>
      </li>
      <li>B1</li>
   </ul>
</div>
</body>
</html>

从上面的代码，我得到以下输出：

A2和A3边框比A1和B1厚。

我如何清除它们以使其整洁（例如A1和B1）？

最佳答案

尝试这个：

CSS：

#reportingmenunav {
    margin: 0;
    padding: 0;
}

#reportingmenunav ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
}

#reportingmenunav .menu > li {
   margin: 0;
   padding: 0;
   list-style-type: none;
   border: 1px solid black;
   width: 50px;
}

#reportingmenunav .sub-menu > li {
    border-top: 1px solid black;
}

#reportingmenunav .menu > li:last-child {
    border-top: none;
}

HTML：

<div id="reportingmenunav">
    <ul class="menu">
       <li>A1
            <ul class="sub-menu">
                <li><a href="#">A2</a></li>
                <li><a href="#">A3</a></li>
           </ul>
      </li>
      <li>B1</li>
   </ul>
</div>

小提琴：http://jsfiddle.net/55kq7zkd/

注意：IE9（不是IE8）支持last-child

要支持IE8，可以使用第一个孩子而不是最后一个孩子作为链接：
http://jsfiddle.net/55kq7zkd/1/

CSS：

#reportingmenunav {
    margin: 0;
    padding: 0;
}

#reportingmenunav ul {
    margin: 0;
    padding: 0;
    line-height: 30px;
}

#reportingmenunav .menu > li {
   margin: 0;
   padding: 0;
   list-style-type: none;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
   width: 50px;
}

#reportingmenunav .sub-menu > li {
    border-top:1px solid black;
}

#reportingmenunav .menu > li:first-child {
    border-top: 1px solid black;
}

关于html - 菜单栏不整齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33272653/