html - li 元素的下边框

Question

我正在尝试为我的 li 元素添加底部边框。这是我的CSS：

.menu{
    text-align:right;
}
.menu li{
    padding:5px;
    text-transform: uppercase;
    display:inline; 
    list-style-type:none;
    list-style-position: inside;

    border-bottom: 1px solid red;
}

还有我的 HTML：

    <div class="menu">
        <ul>
            <li>Home</li>
            <li>Home</li> 
            <li>Home</li> 
            <li>Home</li> 
            <li>Testimonials</li>
            <li>About Us</li>
            <li>Contact Us</li>
        </ul>
    </div>

由于某种原因，没有添加底部边框。我可以在左右两侧添加边框，但不能在底部添加边框。我究竟做错了什么？

Answer 1

尝试添加；

html, body{
  margin: 0;
  padding: 0;
}

您的代码在这里运行良好，无需任何更改。

Answer 2

我很清楚你的需要。下面给出了解决方案，只需将底部更改为正确。请测试并提供反馈。

.menu li{    
    padding:5px;
    text-transform: uppercase;
    display:inline;
    list-style-type:none;
    list-style-position: inside;
    border-right: 1px solid red;
}