中心對齊標誌並在其周圍對齊UL水平

Question

我試圖捕獲我已經看到幾個不同位置的佈局。佈局有一個固定的頭部，圖像居中，然後是一個水平的UL，它圍繞着標誌分開。附件是我覺得代表這個的形象。

我需要一個建議來實現拆分UL徽標。目前，UL始終處於不斷分化之中。

http://jsfiddle.net/jgac8/1/

下面是一些標記，我一直在嘗試： 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媒體查詢，把它關閉，並使其成爲一個導航。

非常基本的想法：

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

範例CSS：

HTML的例子

.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; 
}