html - 如何在居中徽标的侧面提供导航选项？

我想创建一个顶部标题，其徽标位于中心，左侧和右侧分别是导航选项。

以下是我到目前为止所掌握的内容，但不确定如何将其形成。我该怎么做？

<div class="header">
    <div class="nav">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
    <img class="logo_home" src="logo.png" height="100">
            <li>Option 5</li>
            <li>Option 6</li>
            <li>Option 7</li>
            <li>Option 8</li>
        </ul>
    </div>
</div>

CSS：

ul {
list-style:none;
}
li {
display:inline;
}
.header {
background-color: #999;
width: 100%;
height: 80px;
top: 0;
left: 0;
position:absolute;
}
 .logo_home {
display:block;
margin-left:auto;
margin-right:auto;
}

最佳答案

这是关于我认为您要实现的目标的fiddle。
更改li inline to float，现在需要根据您的需要修改ul，以便将其居中。

这是另一个fiddle，我认为这正是您要实现的目标。
您只需要删除图像中的display:block并将text-align:center添加到ul。
这样，元素就在中心。

所以这是HTML

<div class="header">
    <div class="nav">
        <ul>
            <li href="#">Option 1</li>
            <li href="#">Option 2</li>
            <li href="#">Option 3</li>
            <li href="#">Option 4</li>
            <li><img class="logo_home" src="logo.png" height="100" /></li>
            <li href="#">Option 5</li>
            <li href="#">Option 6</li>
            <li href="#">Option 7</li>
            <li href="#">Option 8</li>
        </ul>
    </div>
</div>

这是你的CSS

ul {
list-style:none;
    text-align:center;/* this will center your items*/
}
li {
    margin: 0 5px;
    display:inline;
}
.header {
background-color: #999;
width: 100%;
height: 80px;
}
 .logo_home {
margin-left:auto;
margin-right:auto;
/*removed display:block*/
}

关于html - 如何在居中徽标的侧面提供导航选项？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15855089/