Question

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

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

有没有更好的方法来嘲笑像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; }。这就像“重置”，强制浏览器不能弥补边距和边框的奇怪默认值。

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

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

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

2 个答案: