0

中央揃えのテキストとガターを使用して、2 行に 8 項目の両端揃え、流動的な幅のメニューを作成しています。

これは、約 24% の幅で 1 行に 4 つの項目があることを意味します。ガターは透明です。折り返す長いメニュー テキストをセンタリングすることを除いて、すべてが整っています。テキストが折り返されるとすぐに、2 番目のテキスト行がメニュー項目の下に「落ちます」。

長いテキストが折り返されても垂直方向の中央に配置されるように、メニュー項目の行の高さを設定するにはどうすればよいですか?

私は ul タグと li タグの両方で疑似要素を使用していますが、より良い解決策 (javascrip を含む) があれば、それを受け入れます。2 行を超えるメニュー項目はなく、メニューには小さな画面用のモバイル メニュー ソリューションがあります。通常のブラウザのサポートと IE8+

HTML は WordPress によって生成されるため、あまり変更することはできません。

以下のコード、画像、フィドル。

HTML:

<div id="wrapper">
    <ul >
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Longer text Longer text Longer text</a></li>
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Normal text</a></li>
    </ul>
</div>

CSS:

#wrapper {
    max-width: 1000px;
    background: grey;
}

ul {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    padding: 0;
    margin: 0;
    font-size: 0.1px;
}

ul:after {
    content: '';
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

li {
    width: 24%;
    height: 100px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
    border: 1px solid black;
    background-color: #ddd;
    font-size: 22px;
    color: #000000;
    margin-bottom: 1%;
    text-align: center;
}

li a {
    text-decoration: none;
}

li a:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    line-height: 1px;
    text-align: center;
}

メニュー

フィドル: http://jsfiddle.net/A347a/

4

2 に答える 2

0

あなたの問題は、 a:before 要素の高さの定義から来ています。この問題を css のみで解決する良い方法がわかりません。コンテンツが 1 行を超えないように注意して現在のコードを使用するか、特定のテキスト長を超えるコンテンツが検出された場合に DOM を変更する js-magic を試してください。

于 2013-11-19T19:19:41.907 に答える
0

このような構造の場合、テーブルを使用します。より便利です。

HTML

<table id="wrapper">
    <tbody >
        <tr>
          <td><a href="#">Normal text</a></td>
          <td><a href="#">Normal text</a></td>
          <td><a href="#">Normal text</a></td>
          <td><a href="#">Normal text</a></td>
        </tr>
        <tr>
          <td><a href="#">longer text longer text longer text</a></td>
          <td><a href="#">Normal text</a></td>
          <td><a href="#">Normal text</a></td>
          <td><a href="#">Normal text</a></td>
        </tr>
    </tbody>
</table>

CSS

#wrapper {
    col {
        max-width: 250px;
    }
    background: grey;
    border-spacing:0;
    border-collapse:collapse;
}

tbody {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    padding: 0;
    margin: 0;
    font-size: 0.1px;
}


td {
    width: 25%;
    height: 100px;
    vertical-align: middle;
    background-color: #ddd;
    font-size: 22px;
    color: #000000;
    margin-bottom: 1%;
    text-align: center;
    border: 1px solid black;
}

li a {
    text-decoration: none;
}

フィドル

于 2013-11-18T02:34:27.923 に答える