gpt4 book ai didi

html - Logo 和导航栏内联

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

几个小时以来,我一直在尝试解决此问题,但无济于事。我浏览了许多不同的网站寻找答案,但我一片空白。

我主要是尝试将 Logo 和导航栏链接(菜单)排列在一起,以便它们对齐。导航栏链接应与 Logo 垂直居中。

我可以通过设置精确像素等手动完成,但显然这没有多大用处。我也尝试过将 Logo 作为 li 元素,或者它是自己单独的 div,但我似乎无法让它工作。

任何帮助将不胜感激,同时可能会写一篇关于我哪里出错的文章。

谢谢。

JSFiddle:https://jsfiddle.net/rLL36dz6/

HTML

    <img class="logo" src="http://i.imgur.com/z38lrml.png" border="0 "width="7%"/>

<ul class="nav_bar_links_ul">

<li class="dropdown menulinks">
<a href="#" class="dropbtn">Games</a>
<div class="dropdown-content">
<a href="#">Game 1</a>
</div>
</li>

<li class="dropdown menulinks">
<a href="#" class="dropbtn">Websites</a>
<div class="dropdown-content">
<a href="#">Website 1</a>
<a href="#">Website 2</a>
</div>
</li>

<li class="dropdown menulinks">
<a href="#">About</a>
<div class="dropdown-content">
<a href="#">Meet the Team</a>
<a href="#">About 2</a>
</div>
</li>

<li class="twi">
<a href="#"><img src="http://i.imgur.com/kuCMtoG.png" border="0" width="2%" height="2%" /></a>
</li>
<li class="twi">
<a href="#"><img class="fb" src="http://i.imgur.com/vldeLpR.png" border="0" width="1.6%" height="1.6%" /></a>
</li>
</ul>
</div>

CSS 可以在 fiddle 上找到

最佳答案

借助 flexbox 的魔力,我们只需几行代码就可以实现这样的功能。

这是它还是您需要对其进行更多调整?

.nav_bar {
margin: 0 auto;
margin-top: 6px;
margin-bottom: 6px;
background-color: #00021a;
width: 960px;
}
/* ALL NAVBAR GOES BELOW */

.all_navigation li {
list-style: none;
display: inline-block;
}
.all_navigation{
display: flex;
height: 60px;
align-items: center;
}
.nav_bar_links_ul{
margin: 0;
padding: 0;
align-items: center;
}
.nav_bar_links_ul li {
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
font-weight: 600;
}
.nav_bar_links_ul li,
a {
text-decoration: none;
color: white;
}
.nav_bar_links_ul li,
a:hover {
color: #2E9AFE;
}
.nav_bar_links_ul .menulinks li {
margin-left: 40px;
}
.nav_bar_links_ul .twi {
display: inline;
}
.menulinks {
margin-left: 40px;
}
.twi:hover {
color: #2E9AFE;
}
/* NAVIGATION DROP DOWN */

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
color: #2E9AFE;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="nav_bar">
<div class="all_navigation">

<img class="logo" src="http://i.imgur.com/z38lrml.png" border="0" width="60" height="auto" />

<ul class="nav_bar_links_ul">

<li class="dropdown menulinks">
<a href="#" class="dropbtn">Games</a>
<div class="dropdown-content">
<a href="#">Game 1</a>
</div>
</li>

<li class="dropdown menulinks">
<a href="#" class="dropbtn">Websites</a>
<div class="dropdown-content">
<a href="#">Website 1</a>
<a href="#">Website 2</a>
</div>
</li>

<li class="dropdown menulinks">
<a href="#">About</a>
<div class="dropdown-content">
<a href="#">Meet the Team</a>
<a href="#">About 2</a>
</div>
</li>

<li class="twi">
<a href="#">
<img src="http://i.imgur.com/kuCMtoG.png" border="0" width="2%" height="2%" />
</a>
</li>
<li class="twi">
<a href="#">
<img class="fb" src="http://i.imgur.com/vldeLpR.png" border="0" width="1.6%" height="1.6%" />
</a>
</li>
</ul>
</div>
</div>

关于html - Logo 和导航栏内联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42095405/

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