<br/>使另一个<li>出了车道</li>

Question

当我在其中一个<li>中使用<br />时，其他<br />会发生这种情况： 使用<br />：

没有<div class="menu"> <ul> <a href="#link"><li><p>Text</p></li></a> <a href="#link"><li><p>Text</p></li></a> <a href="#link"><li><p>Text</p></li></a> <a href="#link"><li><p>Text</p></li></a> <a href="#link"><li><p>Text in two lines</p></li></a> </ul> </div> ：

我真的不知道我是否应该在这里使用ul，li。如果你告诉我，那会很好。 我的代码： HTML

.menu{
    height: 96px;
    text-align: center;
}

.menu ul{
    list-style-type: none;
}

.menu li{
    display: inline-block;
    height: 96px;
    width: 96px;
    margin-left: 10px;
    background-image: url("../images/menu-button.png");
}

.menu li:hover{
    background-image: url("../images/menu-button-hover.png");
}

.menu p{
    top:40px;
    position:relative;
}

.menu a{
    text-decoration: none;
    color: black;
}

.menu a:hover{
    text-decoration: none;
    color: black;
}

CSS

{{1}}

提前致谢，等待帮助！

Answer 1

正如Diodeus所说，你的标记无效。看起来应该是这样的：

<强> HTML：

<div class="menu">
    <ul>
        <li><a href="#link">Text</a></li>
        <li><a href="#link">Text</a></li>
        <li><a href="#link">Text</a></li>
        <li><a href="#link">Text</a></li>
        <li><a href="#link">Text in two lines</a></li>
    </ul>
</div>

虽然你可以在那里有一个段落标记，但由于你只有少量的文字，所以它真的是矫枉过正的孩子（除非你需要额外的钩子来造型或者东西）。

JSFiddle

Answer 2

  

使用<br />时仍然存在同样的问题。另一个按钮被推   下来。

您拥有display: inline-block，还需要vertical-align: top。

（默认为vertical-align: baseline。）