在徽標標題中居中導航欄

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

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

來源

2016-05-10 EJJ

你能否把你的HTML添加到你的問題？ – zgood

對不起，遇到一些麻煩 https://jsfiddle.net/xjL3j8nr/ – EJJ

如果其中一個答案完成了你的問題，請點擊綠色檢查標記它。 –

你的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

來源

2016-05-10 17:41:24

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

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; 

}

來源

2016-05-10 17:56:32

在徽標標題中居中導航欄

回答

相關問題