Html 为什么即使两个div都设置为display:inline block,第二个div也会移动到另一行?

Html 为什么即使两个div都设置为display:inline block,第二个div也会移动到另一行?,html,css,positioning,Html,Css,Positioning,我有点害怕使用浮点数,因为我还不知道如何清除浮点数和互联网上与该活动相关的所有黑客,所以我使用display:inline块以内联方式放置两个div。他们的容器有一个 width:auto; max-width:900px; 每个部门都有 display:inline-block; width: 450px; 现在不管我做什么,第二个div总是在第一个div的正下方断开到另一条线 代码如下: 我已经修改了两个div的宽度,例如 width:440px; 但这没用。第二个分区仍然有点“偏离位

我有点害怕使用浮点数,因为我还不知道如何清除浮点数和互联网上与该活动相关的所有黑客,所以我使用display:inline块以内联方式放置两个div。他们的容器有一个

width:auto;
max-width:900px;
每个部门都有

display:inline-block;
width: 450px;
现在不管我做什么,第二个div总是在第一个div的正下方断开到另一条线

代码如下:

我已经修改了两个div的宽度,例如

width:440px;
但这没用。第二个分区仍然有点“偏离位置”。这很奇怪,因为我在制作一个网站,并且对我的标题使用了几乎相同的方法,就像在这个项目中一样。请帮我确定这个问题


我很乐意提供任何帮助。

宽度太宽了

把导航降低到446px左右,它们就会重新排成一行

为什么是444px而不是450px?原因有二:

  • 你的边境需要2倍
  • 标记中的
    标记之间有空格,这反映在呈现中。如果您希望它能够达到450px,请将结束div标记和下一个开始div标记放在相邻位置,如下所示:
  • 如果希望能够保留边框,并将宽度设置为450px,则应选中
    框大小调整
    ,并使用
    框大小调整:边框框

    编辑:
    要解决垂直对齐问题,您需要应用
    vertical align:top到div元素(导航和徽标div)


    而且,
    ul
    不居中,因为当您对其应用
    display:block
    时,它会填充整个宽度。因此,您可以使div的内容以
    ul
    上的
    text align:center
    为中心,也可以使
    ul
    显示:inline block

    ,例如,即使我将第二个div的宽度减小到440px,它确实位于右侧,但向下移动了一点,就像在第二个div上有一个边距顶部一样:。Border只是为了直观地显示每个元素所占据的空间。还有,当我添加显示时,为什么ul没有在导航容器内居中:块和边距:0自动;致ul?有人愿意帮忙吗?:)@Danny_学生-我已经更新了答案以回应您的评论。谢谢!很抱歉再次打扰您,但是当我使用参数和值vertical align:top时,是否需要设置一个表的包装器来围绕这两个元素