0

在我的文档中，我在其下方有一个标题和一个导航选项卡，在 ul 中有几个 li。在我的刊头中，我有一个 .png 标志。现在我想将导航及其元素居中，同时在文档中创建两个装订线，但更重要的是，我希望标头中的徽标位于第一个 li 元素开始的导航上方。

在下面可怕的插图中，您可以看到我想要实现的目标： 

    |.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 回答