我怎样才能实现以下目标(见图片)？我希望我的列表元素位于中间，到目前为止我尝试的是与 Logo (或 H1)在同一行上对齐。
我尝试对 li 应用 margin top，但那根本不起作用。如果有人能指导我指出我哪里出错了，我将不胜感激。
谢谢
我的尝试:
<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。您需要使用 h1 或 ul 来应用它。
编辑:将 .setMiddle 应用于 h1 和 li 它正在工作。 http://jsfiddle.net/6uuXC/1/
关于html - 如何将我的无序列表设置在中间而不是内嵌(见图)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18676152/