0

メニュー項目が1行または2行のテキストであるかどうかに関係なく、等間隔のナビゲーションメニューを作成しようとしています。これは1行のテキストで機能しますが、アイテムが複数行に当たると、テキストの垂直方向の間隔がずれます。

私がこれまでに持っている私のコードは以下の通りです。どんな助けでも素晴らしいでしょう。前もって感謝します。

jsfiddle： http: //jsfiddle.net/wnfUC/

スタイル：

       #pageNavigation {
        background-image: url('../Images/TIBC_Base/nav-bg.png');
        background-repeat: repeat-y;
        margin:5px 0;
        padding:5px 15px 5px;
        min-height:125px;
}
    #pageNavigation_bottom
    {
        clear:both;
        background-image: url('../Images/TIBC_Base/nav-bg_bottom.png');
        background-repeat: no-repeat;
        margin:-5px 0 0 -1px;
        min-height:8px;
    }
    #pageNavigation .navContent{ width:240px; margin:0 -10px; }
    #pageNavigation ul { list-style-type: none; margin:0; padding:0; }
    #pageNavigation ul li { display: block; height:57px; border-top:0px #E1E1E1 solid; border-bottom:1px #E1E1E1 solid; text-align:center; overflow:hidden; }
    #pageNavigation a  {
        color:#485963;
        font-size:16px;
        text-decoration:none;
        text-shadow: 0px -1px #EEEEEE;
        display:block;
        height:57px;    
    }
    #pageNavigation a:hover
    {
        background: #FAE2AD;
        color: #485963;
    }
    #pageNavigation a.NavigationSelected
    {
        color:#F9F9F9;
        background: #A5B5BE;
        text-shadow: 1px 1px #485963;
        font-weight: normal;
    }

HTML

    <div id="pageNavigation">
<ul class="navContent">
<li><a href="/Services">Services</a></li>
<li><a href="/Services/Analysis">Analysis</a></li>
<li><a href="/Services/Strategic-Planning">Strategic Planning</a></li>
<li><a href="/Services/International-Market-and-Competitor-Research">International Market and Competitor Research</a></li>
<li><a href="/Services/Budgeting-and-Forecasting">Budgeting and Forecasting</a></li>
<li><a href="/Services/International-Cultural-Liaison" class="NavigationSelected">International Cultural Liaison</a></li>
</ul>
</div>
4

3 に答える 3

2

これを実現するには、CSS テーブル レイアウト (HTML テーブル要素ではありません) を使用できます: http://jsfiddle.net/PhilippeVay/ZszJm/

ulはテーブルと同じアルゴリズムで表示され、リンクはセルと同じアルゴリズムで表示され、ここでliは縦に並んでいるので行として表示されます。そして、あなたは好きなだけ遊ぶことができvertical-alignます:)（あなたのケースのmiddle値で）
に追加table-layout: fixedするulと、ブラウザはテーブルを表示するために他のアルゴリズムを使用します。セルの幅と高さを適応させようとしないアルゴリズムです。ただし、CSS ルールの内容に固執します。

互換性: IE8 以上。大したことではなく、IE7 と 6 が中心になることはありません。

編集: この方法では、どのアイテムが他のアイテムよりも長いかを事前に知る必要はありません。ブラウザはそれを理解します。

于 2012-10-18T17:15:45.220 に答える
0

この方法を使用できます：http： //css-tricks.com/vertically-center-multi-lined-text/

使用できる方法は他にもいくつかありますが、追加のHTMLマークアップが必要ですが、これには必要ありません。

于 2012-10-18T17:16:51.310 に答える
0

テキストの垂直方向の配置は、通常、 http line-height: //jsfiddle.net/Shmiddty/wnfUC/1/を使用して行われます。

#pageNavigation a  {
    ...
    height:57px;  
    line-height:57px;        
}
#pageNavigation a.two-line{
    line-height:20px;
    padding-top:10px;    
}

two-line2 行にわたるアンカー要素にクラスを追加したことに注意してください。

于 2012-10-18T17:08:19.980 に答える