Question

在我的文档中，我在其下方有一个标题和导航标签，其中有几个li在ul中。在我的标头中，我有一个.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;}

Answer 1

使标题和导航宽度相同并固定边距。

<强> 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>

以两个中心为中心

1 个答案: