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

Question

So I have just downloaded Brackets editor because I heard about it today and I am really enjoying it...but as I started mocking something basic stuff up I came across something which I can seem to fix. 所以我刚刚下载了Brackets编辑器，因为我今天听说过它并且我真的非常喜欢它...但是当我开始嘲笑一些基本的东西时，我遇到了一些我似乎可以修复的东西。

I have a basic menu at the top containing to div tags, one for the name of a random person (the guy from ninja gaiden lol) and one for a list. 我在顶部有一个基本菜单，包含div标签，一个用于随机人的名字（来自忍者外传的人）和一个列表。 They are both in a div tag as well called masthead..eventually I will add some javascript and effects etc..but one thing that doesn't really seem to work is the alignment for the name and the list in the div tag, the list is lower than the name... 它们都是div标签，也称为标头。最后我会添加一些javascript和特效等。但是有一件似乎不起作用的是div标签中名称和列表的对齐方式，列表低于名称...

is there a better way of mocking something basic like that up in css, or perhaps my understanding is a little faulted here. 有没有更好的方法来嘲弄像css那样基本的东西，或者也许我的理解在这里有点故障。

the simple html setup is: 简单的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>

The simple css code is: 简单的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;
}

is there a good way to align them, or perhaps have a quick discussion/advice on good practice for things like that...so this is what trying an editor turns into. 有没有一种很好的方法来调整它们，或者对这样的事情进行快速讨论/建议......所以这就是尝试编辑所转变的。

Answer 1

Your <ul> list appears to have a default margin. 您的<ul>列表似乎有默认保证金。

I suggest adding this to your CSS: 我建议将其添加到您的CSS：

.menu {
  margin:0;
}

If you want the list to be centered vertically relative to the title, you can play with the list's line-height CSS definition. 如果希望列表相对于标题垂直居中，则可以使用列表的line-height CSS定义。

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

Answer 2

What I usually do at the very beginning of each website planning/creation, is add the following to the top of my CSS code: * { padding:0; margin:0; border:0; } 我通常在每个网站规划/创建的开始时做的是将以下内容添加到我的CSS代码的顶部： * { padding:0; margin:0; border:0; } * { padding:0; margin:0; border:0; } * { padding:0; margin:0; border:0; } . * { padding:0; margin:0; border:0; } 。 It's a like "reset", forcing the browsers to not make up weird default values for margins and borders. 这就像“重置”一样，迫使浏览器不会为边距和边框构成奇怪的默认值。

I just did a quick test, and it seems to be working well. 我刚做了一个快速测试，似乎运行良好。

This can help a lot with fine tuning and cross-browser compatibility, at least it's what I have experienced. 通过微调和跨浏览器兼容性，这可以提供很多帮助，至少这是我所经历的。 Also, maybe you should give the "name" <div> and the <ul> a height. 另外，也许你应该给“name” <div>和<ul>一个高度。 I hope this helps! 我希望这有帮助！

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