0

私のドキュメントでは、ヘッダーとそのすぐ下にナビゲーション タブがあり、ul 内にいくつかの li があります。私のマストヘッドには .png ロゴがあります。ここで、ドキュメントに 2 つのガターを作成しながら、nav とその要素を中央に配置したいと考えていますが、さらに重要なことは、マストヘッドのロゴを、最初の li 要素が始まる nav の上に配置することです。

下の恐ろしい図では、私が達成しようとしていることを見ることができます: 

    |.PNG |  

    | li  |  li  |  li  |  li  |

これまでのところ、リスト要素は中央に配置されていますが、上記のように .png を中央に配置することはできません。

助けてくれてありがとう。\:D/

編集：

HTML

<header><img src="whatever.png"</header>
<ul class="nav">
    <li>
        <a href="/">1</a>
    </li>
    <li>
        <a href="/">2</a>
    </li>
    <li>
        <a href="/">3</a>
    </li>
    <li>
        <a href="/">4</a>
    </li>
    <li>
        <a href="/">5</a>
    </li>
    <li>
        <a href="/">6</a>
    </li>
    <li>
        <a href="/">7</a>
    </li>
</ul>

CSS:

header {margin: 0 auto; width: 100%;}
.nav {text-align: center;}
4

1 に答える 1

2

ヘッダーとナビゲーションを同じ幅にして余白を固定します。

CSS

header,
nav
{
    width: 960px;
    margin: 0 auto;
}

HTML

<header>
    <img src="logo.png">
</header>
<nav>
    <ul>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
    </ul>
</nav>
于 2012-09-03T15:00:58.707 に答える