div中的项目没有保持原位

Question

我创建了一个菜单div。在这个div中，我想在左边添加几个列表项和一个徽标。 但是，例如，当我给菜单项添加填充或高度时，它们会出现在菜单div之外，如js小提琴中所示。这些物品不应该超出父母的范围。

Answer 1

你应该使用浮动元素而不是你给菜单元素

的边距

#logo {
    height:50px;
    width:80px;
    background-color:red;
    float:left; // add this
}
#menu ul {
    // margin-left:70%; // remove this
    float:right; // add this
    position: relative;
    line-height: 100px;
}

https://jsfiddle.net/c6tp9zmx/1/

Answer 2

从height:100px;移除#menu，使其自动扩展为您的列表大小。您可以设置min-height。另外，如果列表项与列表项保持在同一水平轴上，请为margin和line-height提供更合适的值，并将float:left;添加到#logo。