Html 带方框的无序列表

我有一个无序列表，其中列表项水平显示。每个列表项都应该包含一些文本和图像。当我向它们添加内容时，列表项不再对齐

ul{
列表样式类型：无；
宽度：500px；
高度：500px；
边框：1px纯黑；
}
李{
边框：1px纯蓝色；
显示：内联块；
高度：100px；
宽度：100px；
}

222

例如，您可以将

垂直对齐设置为
顶部


ul{
列表样式类型：无；
宽度：500px；
高度：500px；
边框：1px纯黑；
}
李{
边框：1px纯蓝色；
显示：内联块；
垂直对齐：顶部；
高度：100px；
宽度：100px；
}

222


列表不喜欢空项。如果出于某种原因需要某个项目为空，请使用
，否则，一旦向所有项目添加内容，将返回正常状态。
通过添加文本，您将看到默认的
垂直对齐属性的效果：您的列表项目将与基线对齐

如果希望它们都在同一位置对齐，请为它们指定
垂直对齐
属性：

li{
  border:1px solid blue;
  display:inline-block;
  height:100px;
  vertical-align: top;
  width:100px;
}

尝试在li上使用
float:left
而不是
display:inline block
，或者您可以对每个
使用
float
到
left


ul{
列表样式类型：无；
宽度：500px；
高度：500px；
边框：1px纯黑；
}
李{
边框：1px纯蓝色；
显示：内联块；
高度：100px；
宽度：100px；
浮动：左；
}

222


您可以在css中添加float:left或display:inline

    li{
      border:1px solid blue;
      display:inline-block;
      height:100px;
      width:100px;  
     display:inline;
    }

这是工作小提琴