Question

我正在尝试捕捉一些我见过几个不同地方的布局。布局具有固定的标题，其中图像居中，然后是围绕徽标分割的水平UL。附上的是我觉得代表这个的形象。

我需要一个建议，以实现分割UL围绕徽标。现在，UL始终处于不分割状态。

这是我一直尝试的一些标记： HTML

<header>
<h1 id="logo"><a href="index"></a></h1>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="about">about</a></li>
<li><a href="services">services</a></li>
<li><a href="location">location</a></li>
<li><a href="contact">contact</a></li>
</ul>
</nav>
</header>

CSS

header {
width: 100%;
height: 150px;
text-align:center;
position: fixed;
top: 0;
left: 0;
background:#FF7D0D;
border-bottom: 1px solid #CCC;
z-index:100;
}

#logo {
display: inline-block;
padding:5px 0 0 0;
width: 80px;
height: 150px;
background: url(../img/PP_Logo_Vert_White.png) center no-repeat;
}

nav {
padding: 0px;
margin: 0px;
font-size:16px;
font-weight: 100;
clear:left;
}

nav ul {
padding: 0px;
margin: 0px;
list-style: none;
}

nav li {
display: inline-block;
padding: 0 50px;
}

Answer 1

你可能需要做一些调整，但我相信这是你想要的。

HTML

<header>
<h1 id="logo"><a href="index"></a></h1>
<nav id="left">
<a href="#" ></a>
<ul>
<li><a href="about">about</a></li>
<li><a href="services">services</a></li>
</ul>
</nav>

    <nav id="right">
<a href="#" ></a>
<ul>
<li><a href="about">about</a></li>
<li><a href="services">services</a></li>
</ul>
</nav>
</header>

CSS

header {
width: 100%;
height: 150px;
text-align:center;
position: fixed;
top: 0;
left: 0;
background:#FF7D0D;
border-bottom: 1px solid #CCC;
z-index:100;
}

#logo {
display: inline-block;
padding:5px 0 0 0;
width: 80px;
height: 150px;
background: url(http://findicons.com/files/icons/2141/web_design_creatives/128/small_smile.png) center no-repeat;
}

#left{position:absolute; left:10%; top:5px; list-style:none}

#right{position:absolute; right:10%; top:5px; list-style:none}

li{list-style:none}

Answer 2

有很多方法可以解决这个问题。取决于您的网站的动态程度。如果你用静态html和css创建它我只需要创建一个容器，在容器中放入三个div，将它按你想要的方式分割。在第一个和第三个div中创建两个单独的菜单。在中心放置徽标。类似下面的代码。在某个宽度上，您可以创建一些css媒体查询以将其关闭并使其成为一个导航。

非常基本的想法：

html示例：

<div class="container">
    <div class="left-nav">
    </div>
    <div class="logo">
    </div>
    <div class="right-nav">
    </div>
</div>

示例CSS：

.container {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
}

.left-nav {
    float: left;
    width: 400px;
}

.right-nav {
    float: left;
    width: 400px;
}

.logo {
    float: left;
    width: 200px;
}

居中对齐徽标并在其周围水平对齐UL

2 个答案: