Question

我正在ul里面建一个导航栏。大多数菜单项都有很长的标题，所以我真的需要将它们包装成多行，如下面的代码所示（我插入了br /我希望返回的地方）

     <ul>
        <li class="cell01on">Menu 1</li>
        <li class="cell02"><a href="#">Menu2.1<br/>Menu2.2<br/>Menu2.3</a></li>
        <li class="cell03"><a href="#">Menu 3</a></li>
     </ul>

我试图让效果类似于使用表格并垂直居中它的单元格中的每一行。是否可以在ul中重新创建相同的内容？

提前谢谢贾尔斯

Answer 1

首先，如果我正确读到菜单2.1是一个子菜单，那么清洁工可能是：

<ul class="menu">
    <li class="active">Menu 1</li>
    <li>Menu 2
        <ul>
            <li><a href="#">Menu2.1</a></li>
            <li><a href="#">Menu2.2</a></li>
            <li><a href="#">Menu2.3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
</ul>

垂直对齐通常很难在CSS外表中进行，但请看一下： http://www.student.oulu.fi/~laurirai/www/css/middle/

Answer 2

我倾向于同意Nux的回答，子菜单应该是嵌套列表。至于你关于垂直居中的问题：如果你希望事物看起来像表格，你可以简单地使用display: table;：

<style>
  ul { list-style-type: none; padding: 0; display: table; }
  li { display: table-cell; vertical-align: middle; }
</style>

Answer 3

你可以添加一些样式，如

li
{
   white-space:pre-wrap;
   width://set width here
   text-align:center;
   vertical-align:middle;
}

<ul> </ul>中的文本中心

3 个答案: