如何在我的<li>菜单中放置边框底部？

Question

这是我的菜单：

这是我的理由：

li {
    float: left;
    border-right: 1px solid #ccc;
    padding: 25px 20px
}

Answer 1

将box-sizing属性设置为border-box：

li {
    box-sizing: border-box;
    float: left;
    border-bottom: 1px solid #ccc;
    padding: 25px 20px
}

Answer 2

你可以这样做：

* {
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
}

ul li {
  display: inline;
  margin: 0;
  padding: 0;
}

ul li a {
  margin: 0;
  padding: 10px 15px;
  display: inline-block;
  border-right: 1px solid black;
  border-bottom: 1px solid red;
  text-decoration: none;
}

ul li a:hover {
  text-decoration: underline;
}

<ul>
<li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Stuff</a></li>
</ul>