gpt4 book ai didi

html - 如何将我的无序列表设置在中间而不是内嵌(见图)?

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

我怎样才能实现以下目标(见图片)?我希望我的列表元素位于中间,到目前为止我尝试的是与 Logo (或 H1)在同一行上对齐。

我尝试对 li 应用 margin top,但那根本不起作用。如果有人能指导我指出我哪里出错了,我将不胜感激。

谢谢

enter image description here

我的尝试:

<html>
<header>
<link rel="stylesheet" type="text/css" href="style2.css"></header>
<body>
<div>
<h1 class="logo">LogoHere</h1>

<ul class="nav-menu">
<li><a href="index.html">Action</a></li>
<li><a href="about.html">Who we are</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Get in touch</a></li>
</ul>
</div>
</body>

CSS:

.logo {
display: inline-block;
position: relative;
font-family: times, Times New Roman, times-roman, georgia, serif;
font-size: 54px;
line-height: 40px;
letter-spacing: -5px;
color: #444444;
margin: 0 0 0 0;
padding-top: 25px;
padding-left: 25px;
font-weight: 100;
}

.nav-menu {
display: inline-block;
list-style-type: none;
font-size: 20px;
padding: 0px;
margin-top: 0px;
padding-left: 50px;
width: 55%;
margin-left: 10px;
}

.nav-menu li {
display: inline;
margin: 0px 20px 20px 0px;
}

.nav-menu li a {
text-decoration: none;
color: grey;
}

li a:hover {color: #444444;} /* mouse over link */

li a:active {
color:white;
text-decoration: underline;
} /* selected link */

最佳答案

尝试使用:

.setMiddle
{
vertical-align:middle;
}

它将元素设置在框(div)中。你做了几个margin,padding。所以首先删除这些然后应用 .setMiddle。您需要使用 h1ul 来应用它。

编辑:将 .setMiddle 应用于 h1li 它正在工作。 http://jsfiddle.net/6uuXC/1/

关于html - 如何将我的无序列表设置在中间而不是内嵌(见图)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18676152/

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