gpt4 book ai didi

html - 导航栏中间的标志

转载 作者:太空宇宙 更新时间:2023-11-04 02:52:35 25 4
gpt4 key购买 nike

我在搜索 SO 时遇到了一些例子,但对我来说——作为一个初学者——在实现这个问题时,我不太清楚什么是最佳实践。

我想在我的导航栏中间放置 Logo ,其中 2 个链接在图像左侧居中,2 个链接在右侧居中,这样我的 4 个链接就能使 Logo 的中心与 4 个链接水平对齐。

供您引用: http://jsfiddle.net/8fc0e632/

HTML:

<body>
<nav class="menubar">
<div id= "navmenu">
<ul>
<li><a href="Info.html">Over ons</a></Li>
<Li><a href="Menu.html">Menukaart</a></Li>
<li><a class="logo" href="Info.html"><img src="http://i.imgur.com/WwCbbpG.jpg" alt="First8 Logo"></a></li>
<Li><a href="Ontbijtmanden.html">Ontbijtmanden</a></Li>
<Li><a href="Contact.html">Contacteer ons</a></Li>
</ul>
</div>
</nav>

CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,800italic);

.body {
font-family: "Open Sans";
}

.menubar {
background: rgb(228, 6, 19);
box-shadow: 0 1px 3px #999;
font-family: inherit;
}

.menubar ul {
display: block;
text-align: center;
padding: 0;
margin: 0;
list-style: none;
}

.menubar ul li {
display: inline;
list-style: none;
}

.menubar ul li a {
text-decoration: none;
color: white;
padding: 0 15px 0 0;
font-family: "Open Sans"
}

.logo img {
margin: 10px auto 0px auto;
display: block;
width:220px;
}

最佳答案

如果你想这样做,你将不得不设置 li 宽度,因为菜单项的长度不一样。

CSS:

.menubar ul li {
display: inline-block;
width: 220px;
list-style: none;
vertical-align: middle;
}

这是您更新的 JSFiddle

但在我看来,你能做的最好的事情就是使用 Bootstrap

//哦,你应该总是使用<li></li>不是<Li></Li>绝对不是<li></Li>

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com