gpt4 book ai didi

html - 垂直对齐 : Middle

转载 作者:行者123 更新时间:2023-11-28 10:31:38 25 4
gpt4 key购买 nike

我试图将两个链接垂直对齐到 Logo 的两边中间,但它似乎不起作用。此外,我想让它成为一个响应式导航,两个链接都以 Accordion 下拉方式显示在 Logo 下方。我一直在到处寻找解决方案,但找不到。

HTML

<nav>
<ul id="nav">
<li><a href="#">Boat</a>
<ul class="boat">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul></li>
<img src="images/logo.png"/>
<li><a href="#">Experience</a>
<ul class="experience">
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Page 5</a></li>
</ul></li>

</ul>
</nav>

CSS

* { 
margin: 0px;
padding: 0px;
}

header {
width: 100%;
text-align: center;
}

.center h1 {
display: inline;
vertical-align: 60%;
}


ul#nav {
text-align: center;
vertical-align:top;
}

ul#nav li {
width: 125px;
position: relative;
margin-right:5px;
line-height: 25px;
border-radius: 10px;
display: inline-block;
padding: 5px;
}

ul#nav a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: #f3f3f3;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}

ul.boat, ul.experience {
list-style-type: none;
display: inline-block;
text-align: center;
font-size: 1em;
position: absolute;
top:100%;

}

ul#nav li:hover > a {
background-color: yellow;
}

ul#nav ul.boat, ul.experience {
display:none;
}

ul#nav li:hover ul.boat {
display: block;
}

ul#nav li:hover ul.experience {
display: block;
}

感谢您提供的任何帮助

最佳答案

ul#nav li
{
vertical-align: top; // takes the links to the top
padding-top: 10px; // modify so that it goes to middle
}

如果您试图将链接放在图像的中间,此代码应该可以工作。告诉我它是否有效

在这里做了一个 fiddle

http://jsfiddle.net/h_awk/Ff5xk/

关于html - 垂直对齐 : Middle,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23504526/

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