gpt4 book ai didi

html - 带有 Logo 的标题中的居中导航栏

转载 作者:行者123 更新时间:2023-11-28 05:54:16 24 4
gpt4 key购买 nike

在元素中寻求一点帮助,我试图让导航栏居中放置在左侧带有 Logo 的页眉中。

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

最佳答案

您的导航宽度 100% 迫使导航位于图像下方。我在标题中添加了 overflow: hidden,将 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;
}

您可以调整边距等,以从此开始设计您想要的样式。

代码笔:http://codepen.io/Tambe257/pen/XdGdLZ

关于html - 带有 Logo 的标题中的居中导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37144930/

24 4 0