1

这是我的简单菜单代码

  <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;
}

我想知道如何换行我的文字，因为它是这样显示的在此处输入图像描述

4

2 回答 2

2

只需vertical-align: top在您<li>的 s 上使用。请注意，所有 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>您可以使用这样的子选择器更轻松地设置所有 s 的样式：

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>-tag 中文本的垂直居中：tesdki只是display: table-cell;在<a>-tags 上使用是正确的。

于 2013-02-28T16:35:12.070 回答
1

试试这个：

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 标准模式下不起作用，但几乎其他一切都很好。

于 2013-02-28T16:02:31.733 回答