在 header 中将导航栏居中并带有徽标
Centering nav bar in header with logo
在项目中寻求一点帮助,我正在尝试将导航栏居中放置在 header 中,左侧带有徽标。
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;
}
您的导航宽度 100% 迫使导航位于图像下方。我添加了 overflow: hidden 到 header,将 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;
}
您可以调整页边距等以从此开始设计您想要的样式。
对父元素和将嵌套在其中的子元素使用定位。这是一个简单的例子
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;
}
在项目中寻求一点帮助,我正在尝试将导航栏居中放置在 header 中,左侧带有徽标。
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;
}
您的导航宽度 100% 迫使导航位于图像下方。我添加了 overflow: hidden 到 header,将 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;
}
您可以调整页边距等以从此开始设计您想要的样式。
对父元素和将嵌套在其中的子元素使用定位。这是一个简单的例子
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;
}