Html 为什么即使两个div都设置为display:inline block,第二个div也会移动到另一行?
我有点害怕使用浮点数,因为我还不知道如何清除浮点数和互联网上与该活动相关的所有黑客,所以我使用display:inline块以内联方式放置两个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; 但这没用。第二个分区仍然有点“偏离位
width:auto;
max-width:900px;
每个部门都有
display:inline-block;
width: 450px;
现在不管我做什么,第二个div总是在第一个div的正下方断开到另一条线
代码如下:
我已经修改了两个div的宽度,例如
width:440px;
但这没用。第二个分区仍然有点“偏离位置”。这很奇怪,因为我在制作一个网站,并且对我的标题使用了几乎相同的方法,就像在这个项目中一样。请帮我确定这个问题
我很乐意提供任何帮助。宽度太宽了 把导航降低到446px左右,它们就会重新排成一行 为什么是444px而不是450px?原因有二:
标记之间有空格,这反映在呈现中。如果您希望它能够达到450px,请将结束div标记和下一个开始div标记放在相邻位置,如下所示:
框大小调整
,并使用框大小调整:边框框代码>
编辑:
要解决垂直对齐问题,您需要应用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时,是否需要设置一个表的包装器来围绕这两个元素