在垂直菜单中换行文本

Question

这是我简单的菜单代码

  <ul id="admin-ul">
    <li id="admin-li" class="no1"><a href="dodaj.php">Dodaj informacije za sdf dsf dsfdddd</a></li>
    <li id="admin-li" class="no2"><a href="pregledaj.php">Pregledaj</a></li>
    <li id="admin-li" class="no3"><a href="veterinari.php">Veterinari</a></li>
    <li id="admin-li" class="no4"><a href="../logout.php">Logout</a></li>
  </ul>

和CSS

ul#admin-ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}

li#admin-li
{
    display:inline-block;
    width:24%;
    height:270px;
}

ul li a
{
    display:block;
    height:270px;
    line-height:270px;
    text-align:center;
}

我想知道如何包装我的文字，因为它显示为

Answer 1

只需在vertical-align: top上使用<li>即可。请注意，所有ID都必须是唯一的，因此HTML格式无效：

<li id="admin-li" class="no1"><a href="dodaj.php"></a></li>
<li id="admin-li" class="no1"><a href="dodaj.php"></a></li>

您可以使用子选择器更轻松地设置所有<li>的样式：

ul#admin-ul > li {
    /* other li rules */
    vertical-algin: top;
}

您可以将列表更新为：

<ul id="admin-ul">
    <li class="no1"><a href="dodaj.php"></a></li>
    <li class="no1"><a href="dodaj.php"></a></li>
</ul>

最终演示：http://jsfiddle.net/eXKdG/

<子>更新 的

由于我没有注意到块级<a>内文本的垂直居中 - 标记：tesdki只需使用display: table-cell;上的<a> - 标签

Answer 2

试试这个：

ul#admin-ul
{
    list-style-type:none;
    margin:1em 0 0 0;
    padding:0;
}

li#admin-li
{
    display:table;
    width:24%;
    position:relative;
    float:left;
    overflow:hidden;
    height:270px;
    margin: 0 3px;
}

ul li a
{
    display:table-cell;
    vertical-align:middle;
    height:270px;
    text-align:center;
}

来自此处：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

这在IE7标准模式下不起作用，但其他一切都很好。