Html 带多行列表项的水平列表（ul）？

我有一个水平列表（用于导航栏），我希望单个列表项是多行的。我尝试使用

，但这会导致整个列表跳过一行

以下是我对html的理解：

<ul class="nav_list">
        <li><a href="#">Home<a></li>
        <li><a href="#">Bar/Bat Mitzvah<br />Tutoring<a></li>
        <li><a href="#">Early <br />Childhood<a></li>
        <li><a href="#">Home<a></li>
        <li><a href="#">Home<a></li>

</ul>

这就是它的外观（photoshop）：

---

有什么建议吗？

我想这就是你想要的：

CSS:

.nav_list {
    float:right;
    margin-top:55px;
}

.nav_list li {
    display:inline-block;
    list-style-type:none;
    text-align:center;
    margin:0 10px 0 0;

}

.nav_list li a {
    font-size:18px;
    font-family: arial;
    color:#b64366;
    text-decoration:none;
    padding:4px 10px 5px 10px;
    background-image:url('../images/nav_divider.png');
    background-repeat:no-repeat;
    background-position:right;
    font-weight:bold;
    cursor:pointer;
    display:block;

}
.nav_list li a:hover{
    border-bottom:2px solid #b64366;
}

---

​

您可以为每个列表元素设置一个宽度，以将它们约束到某个宽度。这将导致单词拆分为多行

.nav_list li a {
    width: 100px;
}

然后添加底部边框，使下划线悬停

.nav_list li :hover {
    border-bottom: 1px solid #b64366;
}

以下是您的解决方案：

Html有一些错误，比如'a'标记没有正确结束'/a'

“br/”工作正常，只需将float:left添加到“.nav_list li”

此外，我认为你应该在“li”上加上填充，而不是“a”

---

这是正确的吗？

关闭此示例正是我想要的。非常感谢。

.nav_list li :hover {
    border-bottom: 1px solid #b64366;
}