有人可以诊断这个CSS问题吗？

Question

嘿那里，有人可以帮助诊断这个CSS问题，因为我不知道哔哔声是什么;

这是我的CSS：

#navigation {
display: inline;
}

.download {
width: 10px;
height: 40px;
}

.steps {
width: 90px;
height: 40px;
}

这是我的HTML：

<div id="navigation">
<div class="download"></div>
<div class="steps"></div>
</div>

出于某种原因，即使显示：内联;正在使用，课程仍然低于彼此。

在有人评论为什么我没有使用无序列表创建我的导航之前，这意味着要以非常低的工资快速完成工作，所以最好的形式不是我想要的。那就是说，我一直试图将这个问题诊断超过半个小时，而且我很难过。我显然犯了一个明显的错误，我就是不能接受它。

非常感谢任何帮助:)。

Answer 1

父div是内联的，而不是孩子。你没有和孩子们做过任何事，他们仍然是block。如果您生成孩子inline-block，您的问题可能会解决，但是：

.download, .steps {
    display: inline-block;
}

或者你可以漂浮它们：

.download, .steps {
    float: left;
}

#navigation {
    overflow: hidden;
    zoom: 1; /* if you care for the anti-browser */
}

所有这一切都是因为你照顾它们以保持你指定的宽度和高度，同时保持它们彼此相邻。

Answer 2

你可以将所有div留下来并获得相同的结果。

Answer 3

我不相信div默认继承父显示属性，div是块。所以你必须同时设置.download和.steps才能显示：inline

您还可以创建一个选择器，如：

#navigation div { display:inline; }

很可能，您希望#navigation无论如何都要阻止，因为您可能希望导航容器被阻止。

Answer 4

尝试在#navigation div ...

中的div上添加样式

#navigation, #navigation > div {
display: inline;
}