div中的元素不在同一垂直对齐中

Question

所以我刚刚下载了Brackets编辑器，因为我今天听说过它并且我真的非常喜欢它...但是当我开始嘲笑一些基本的东西时，我遇到了一些我似乎可以修复的东西。

我在顶部有一个基本菜单，包含div标签，一个用于随机人的名字（来自忍者外传的人）和一个列表。 它们都是div标签，也称为标头。最后我会添加一些javascript和特效等。但是有一件似乎不起作用的是div标签中名称和列表的对齐方式，列表低于名称...

有没有更好的方法来嘲弄像css那样基本的东西，或者也许我的理解在这里有点故障。

简单的html设置是：

<!DOCTYPE html>
<head>
    <title>first page</title>
    <link rel="stylesheet" href="menu_one.css" type="text/css" />
</head>
<body>
    <div id="masthead">
        <div id="name">Ryu Hyabusa</div>
        <ul class="menu">
            <li>item one</li>
            <li>item two</li>
            <li>item three</li>
            <li>item four</li>
        </ul>
    </div>

    <div id="content">
        <p>there is some content here</p>
    </div>

</body>

简单的css代码是：

#masthead {
  position: fixed;
  background-color: yellow;
  width: 98%;
}

#name {
  font-weight: bold;
  font-size: 24px;
  float: left;
}

.menu {

}

.menu li {
  list-style-type: none;
  display: inline;
  padding-left: 20px;
  float: right;
}

#content {
  padding-top: 50px;
  text-align: center;
}

有没有一种很好的方法来调整它们，或者对这样的事情进行快速讨论/建议......所以这就是尝试编辑所转变的。

Answer 1

您的<ul>列表似乎有默认保证金。

我建议将其添加到您的CSS：

.menu {
  margin:0;
}

如果希望列表相对于标题垂直居中，则可以使用列表的line-height CSS定义。

http://jsfiddle.net/6QYKj/1/

Answer 2

我通常在每个网站规划/创建的开始时做的是将以下内容添加到我的CSS代码的顶部： * { padding:0; margin:0; border:0; } * { padding:0; margin:0; border:0; } * { padding:0; margin:0; border:0; } 。 这就像“重置”一样，迫使浏览器不会为边距和边框构成奇怪的默认值。

我刚做了一个快速测试，似乎运行良好。

通过微调和跨浏览器兼容性，这可以提供很多帮助，至少这是我所经历的。 另外，也许你应该给“name” <div>和<ul>一个高度。 我希望这有帮助！

div中的元素不在同一垂直对齐中

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-12-06 00:07:55

解决方案2
1 2013-12-06 00:14:49

div中的元素不在同一垂直对齐中

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-12-06 00:07:55

解决方案2 1 2013-12-06 00:14:49

解决方案1
1 已采纳 2013-12-06 00:07:55

解决方案2
1 2013-12-06 00:14:49