帶標題的標題中的導航欄居中

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

導航寬度100％會將導航強制在圖像下方。 我添加了溢出：隱藏在標題中，將img浮動到左側，並在#nav上放置一個空白。

將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;

}