0

わかりました。ワードプレスを使用して友人の教会のサイトを開発していて、思わぬ障害に遭遇しました。私は通常、ナビゲーション バーに夢中になることはありませんが、それを試してみることにしました。

ナビゲーション バーの背景は 1x64 ピクセルの繰り返し x です。ナビゲーション バーは、実際には UL インライン ディスプレイです。<li>各タグの背景を、ダイナミックな素晴らしさのために隣り合わせに並べた静的なセット画像にしたいと考えています。問題: 背景画像を完全に 100% にすることはできません。テキストと同じ幅です。画像サイズ（フォトショップで作成）は167×64ピクセルです。タグ内のリンクを水平方向に中央に<nav>配置することができず、<li>背景を本来のサイズにすることができません。各レベルのすべての高さを手動で 64px に設定し、必要なverticle-align:middle;配置に使用しようとしましたが、頭が本当に混乱しています @.@

http://parnell.co/hurricane-church-of-godにあるサイト

ページソース:

<div class="nav-wrapper">

            <!-- Nav -->

                <nav>
                    <ul id="menu-nav-bar" class="menu">
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-18"><a href="http://parnell.co/hurricane-church-of-god/">Home</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://parnell.co/hurricane-church-of-god/sample-page">Sample Page</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://parnell.co/hurricane-church-of-god/blog">Blog</a></li>
</ul>                </nav>

            <!-- /Nav -->

            <br class="clear">

        </div>
        <!-- /nav-wrapper -->

CSS ソース:

/******************************************************
     *                    Navigation                      *
     ******************************************************/

    div.nav-wrapper {
        margin-top:-16px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        background:url(img/nav-bg.png) repeat-x;
        height:64px;
        vertical-align:middle;
    }

    div.nav-wrappter ul,
    nav ul li {
        float:left;
        height:64px;
        vertical-align:middle;
    }

    nav ul#menu-nav-bar li {
        display: inline;
        list-style-type: none;
        vertical-align:middle;
        background-image:url(img/nav-button.png);
        background-size:100%;
        background-repeat:no-repeat;
        height:64px;
    }

    nav ul#menu-nav-bar li a {
        text-decoration:none;
        height:64px;
        vertical-align:middle;
    }

コードのずさんさをご容赦ください。私は一日中頭を悩ませようとしており、その部分で8回ほどゼロから始めました。あなたが与えることができるどんな助けも大歓迎です

4

1 に答える 1

0

わかりました、@ ahillman3 のおかげで、私は自分の心をまっすぐにして理解することができました。ところで素晴らしいリンク。同様に、タイプミス... それが修正されるまで何も正しく機能しなかったため、これが最大の問題でした。<li>タグの幅を指定すると、ボタンが正しく動作するようになりました。また、テキストの中央揃えに関しては、css 属性display:block;が適用された場合、タグ (行オブジェクト) をまたはテーブル (ブロック オブジェクト) のように動作nav ul#menu-nav-bar li a {}させるための鍵でした。その後、ボックス内のテキストの中央にマージンを追加するのと同じくらい簡単でした。<a>div

みんなありがとう！

于 2013-01-23T12:05:46.557 に答える