0

彼女は私にデザインをくれました。中央に大きなロゴ（高さは100px、6.250em）で、通常のリストアイテムは高さ50px（3.125em）です。今、私はこれを行う方法がわかりません。

これは私が持っているものです

そして、これが最終結果になります。

終わり

だから、誰かが私を助けることができますか？

HTML

<div id="container">
    <nav>
        <ul>
            <li><a href="#" class="menu">home</a></li>
            <li><a href="#" class="menu">about</a></li>
            <li><a href="#" class="menu">fotoreportage</a></li>
            <li id="logo"><a href="#">navatushots</a></li>
            <li><a href="#" class="menu">portfolio</a></li>
            <li><a href="#" class="menu">voorwaarden</a></li>
            <li><a href="#" class="menu">contact</a></li>
        </ul>
    </nav>
</div>

CSS：

body{
    background-color:#c3c3c3;
}

nav{
    width:100%;

    list-style:none;
    text-align:center;

    background-color:#fff;
}

nav li{
    display: inline-block;
}

nav li a{
    height:3.125em;
    line-height:50px;   

    text-decoration:none;
    color:#000; 
}

nav li#logo{
    height:100px;
    line-height:6.250em;    
    background-color:#595450;
    color:#fff;
}
4

3 に答える 3

1

@DaveRookがコメントで示唆しているように、別々ul-liのセクションを使用する方がはるかに簡単です。

フィドルリンク

HTML

<div id="container">
    <nav>
        <ul>
            <li><a href="#" class="menu">home</a>

            </li>
            <li><a href="#" class="menu">about</a>

            </li>
            <li><a href="#" class="menu">fotoreportage</a>

            </li>
        </ul>
        <ul>
            <li id="logo"><a href="#">navatushots</a>

            </li>
        </ul>
        <ul>
            <li><a href="#" class="menu">portfolio</a>

            </li>
            <li><a href="#" class="menu">voorwaarden</a>

            </li>
            <li><a href="#" class="menu">contact</a>

            </li>
        </ul>
    </nav>
</div>

CSS

body {
    background-color:#c3c3c3;
}
nav {
    width:100%;
    list-style:none;
    text-align:center;
    background-color:#fff;
}
nav ul, nav li {
    display: inline-block;
}
nav li a {
    height:3.125em;
    line-height:50px;
    text-decoration:none;
    color:#000;
}
nav li#logo {
    height:100px;
    line-height:6.250em;
    background-color:#595450;
    color:#fff;
}
于 2013-03-11T12:39:10.567 に答える
1

マークアップについて少し再考するために、より多くの種類のセマンティックソリューションを示します：http：//jsfiddle.net/Qh3X5/

<h1 title="NavatuShots">NavatuShots</h1>
<nav>
    <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">about</a></li>
        <li class="mid-left"><a href="#">fotoreportage</a></li>
        <li class="mid-right"><a href="#">portfolio</a></li>
        <li><a href="#">voorwarden</a></li>
        <li><a href="#">contact</a></li>
    </ul>
</nav>

これで、ロゴは「NavatuShots」という単語を含むH1でラップされますが、「text-indent：-9999px;」のために表示されず、代わりにロゴが背景画像で表示されます。また、ホームリンクをH1に追加することをお勧めします。これは、人々がそれをクリックしようとする可能性があるためです。

ロゴの配置は、「位置：絶対;左：50％;上：0;」で行われます。次に、ロゴの幅の半分の負のマージンがH1要素に追加されるため、正しく中央に配置されます。

一方、ul要素は分割されていません。ヘルパークラスに追加しました。ヘルパークラスは、中央のli要素にある程度のマージンを提供します。

それはほとんどそれです。

于 2013-03-11T13:33:10.233 に答える
0

ロゴをその位置に表示したいがheight、コンテナを引き伸ばさない場合は、これが探しているものかもしれません：http: //jsfiddle.net/d92Ux/1/

- 編集 -

更新されたデモ：http：//jsfiddle.net/d92Ux/4/

于 2013-03-11T12:31:23.703 に答える