文本换行
这是我的菜单文本换行
<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;
}
我想知道如何包装我的文字,因为它显示像这样
试试这个:
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标准模式,但几乎所有其他东西都很好。
只需在您的<li>
上使用vertical-align: top
即可。请注意,所有的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>
- 标签内的文本的垂直居中:tesdki是正确的,只是使用的<a>
标签都有效display: table-cell;
。
这也有同样的问题,如果你让“Dodaj”线超过宽度,那么它会撞到盒子的底部。 http://jsfiddle.net/eXKdG/2/ – tedski 2013-02-28 18:52:40
你是对的,谢谢你指出。我甚至没有注意到那个巨大的“线条高度”。我认为这只是盒子的垂直对齐。 – insertusernamehere 2013-02-28 22:05:21
它在技术上是环绕的,你只需将行高设置为与容器div相同的高度,所以下一行将比第一行低540px。 – tedski 2013-02-28 15:48:24