0

我怎样才能实现以下目标（见图）？我希望我的列表元素位于中间，到目前为止，我尝试的内容与徽标（或 H1）对齐在同一行。

我尝试在 li 上应用一个边距，但这根本不起作用。如果有人可以指导我出错的地方，我将不胜感激。

谢谢

在此处输入图像描述

我的尝试：

<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 */
4

2 回答 2

1

尝试使用：

.setMiddle
{
  vertical-align:middle;
}

它在框（div）中设置元素中间。你已经做了几个边距，填充。所以首先删除这些然后应用.setMiddle。您需要使用h1或来应用它ul。

编辑：应用 .setMiddleh1并且li它正在工作。http://jsfiddle.net/6uuXC/1/

于 2013-09-07T18:03:39.727 回答
0

诀窍是line-height有效地使用 CSS 属性。这是一个小提琴，展示了如何做到这一点。

HTML

<select multiple>
  <option>One</option>
  <option>Two</option>
</select>

CSS

header {
  line-height: 100px;
}
header span {
  padding: 0 0 0 20px;
}
.logo {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
}
于 2013-09-07T18:02:57.257 回答