在徽標標題中居中導航欄

Question

尋找一個項目的一點幫助，我試圖讓一個導航欄位於標題左側的標題內。

HTML

<header> 
    <img src="http://s32.postimg.org/5bebu6mbl/Image_5_8_16_at_12_10_PM.jpgHome" /> 
    <div id="nav"> 
    <span><a href="#">Home</a></span> 
    <span><a href="#"><button>Televeisions</button></a></span> 
    <span><a href="#">Electronics</a></span> 
    <span><a href="#">Services</a></span> 
    </div> 
</header> 

CSS

header { 
    height: 5.5em; 
    background: gray; 
    color: Black; 
    text-align: justify; 
} 

#nav { 
    width: 100%; 
    text-align: center; 
} 

#nav span a { 
    color: black; 
    text-decoration: none; 
    padding: 10px; 
} 

JSFiddle

Answer 1

你的NAV寬度100％迫使圖像下方的NAV。我添加了溢出：隱藏到標題，左邊的img浮動，並在#nav上放置了一個margin-top。

調整你的CSS是這樣的：

header { 
    height: 5.5em; 
    background: gray; 
    color: Black; 
    text-align: justify; 
    overflow: hidden; 
} 
img { 
    float: left; 
} 
#nav { 
    width: 600px; 
    text-align: center; 
    margin-top: 2.5em; 
} 

#nav span a { 
    color: black; 
    text-decoration: none; 
    padding: 10px; 
} 

您可以調整保證金等，以風格如何從那裏想就出。

Codepen：你的父元素，並且將裏面嵌套的子元素上http://codepen.io/Tambe257/pen/XdGdLZ

Answer 2

使用的定位。這裏有一個簡單的例子

header { 
    height: 5.5em; 
    background: gray; 
    color: Black; 
    text-align: justify; 
    position:relative; 
} 

#nav { 
    width: 100%; 
    text-align: center; 
top:2em; 
position:absolute; 
} 

#nav span a { 
    color: black; 
    text-decoration: none; 
    padding: 10px; 

}