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

所以我刚刚下载了Brackets编辑器，因为我今天听说了它，我真的很喜欢它……但当我开始嘲笑一些基本的东西时，我发现了一些我似乎可以修复的东西。

我在顶部有一个包含todiv标签的基本菜单，一个是随机人的名字（忍者盖登lol中的家伙），另一个是列表。它们都在一个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;
}

有没有一个好的方法来调整它们，或者可能就这样的事情的良好实践进行快速讨论/建议。。。这就是尝试编辑的结果。

您的<ul>列表似乎具有默认边距。

我建议将此添加到您的CSS:中

.menu {
  margin:0;
}

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

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

在每个网站规划/创建的最初，我通常会在CSS代码的顶部添加以下内容：* { padding:0; margin:0; border:0; }。这就像"重置"，强制浏览器不为边距和边框设置奇怪的默认值。

我刚刚做了一个快速测试，看起来效果不错。

这对微调和跨浏览器兼容性有很大帮助，至少这是我所经历的。此外，也许您应该给"名称"<div>和<ul>一个高度。我希望这能有所帮助！

相关内容

最新更新

热门标签：