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>。これは無効なHTMLであるため、すべてのIDは一意である必要があることに注意してください。

<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>ブロックレベルの-tag内のテキストの垂直方向の中央揃えに気づかなかったので、tesdkiは-tagsを使用するだけでdisplay: table-cell;正しい<a>です。

于 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 に答える