Html 需要帮助在我的代码中定位CSS吗

我一直在努力使用CSS样式。问题是我无法正确定位图像。由于某些原因，图像未以正确的预期流显示。我还想集中整个内容。调整浏览器的大小时，它未正确居中。一旦您复制了我的代码，您就可以很容易地注意到所有这些问题。这是我的密码。谢谢 HTML

正文{
字体系列：“开放式sans”，无衬线；
} 
#内容p{
填充物：5px；
字号：0.8em；
}
#包裹{
最大宽度：900px；
填充：3%；
保证金：0自动；
}
保险商实验室{
列表样式类型：无；
填充：0；
}
#联系{
左侧填充：35px；
背景重复：无重复；
背景尺寸：20px；
}
#内容a{
宽度：100%；
显示：内联块；
身高：100%；
}
#内容简介{
宽度：100%；
}
a{
文字装饰：无；
}
#内容李{
浮动：左；
宽度：25%；
利润率：3%；
框大小：边框框；
背景色：深蓝色；
} 
页脚{
明确：两者皆有；
文本对齐：居中；
}
页脚img{
宽度：25px；
}
h1{
字体大小：正常；
字体系列：“更改一个”，无衬线；
颜色：#fff；
字号：2.4em；
填充：0px；
边际：0px；
显示：内联块；
}
氢{
字体大小：.9em；
字体大小：正常；
颜色：#fff；
利润率：10px0；
}
#内容ul{
填充：0；
保证金：0；
}

&抄袭；2014年敲响了警钟

问题在于

元素中的某些文本项会换行到3行，而有些仅换行到2行。这使他们比其他人高。当下一个

换行到下一行时，它最终被定位到较高项目的右侧

视觉表现：

要解决此问题，您可以尝试使所有项目的高度相同。这样，它们就会清晰地围绕在一起。

正如我目前所看到的，代码中有两个“问题”

您正在尝试将内容放在中心位置，并使用

#wrap

正确地完成它。但是列表中的列表元素每个都有25%的宽度，加上3%的边距，所以总共有31%。因此，最接近周围元素100%宽度的值是93%，因为列表元素的

float:left

。这应该可以解决问题：

ul {
    width: 93%;
    margin: 0 auto;
    list-style-type: none;
    padding: 0;
}

#content li {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    margin: 3%;
    box-sizing: border-box;
    background-color: bisque;
}

我在

ul

中添加了一个宽度和居中边距，您的

li

元素现在是内联块，并在其顶行对齐。

在#content li{height:200px；margin bottom:100px；}上再设置两个属性。这样会更好，但您的bisque背景会有问题