Html 在UL-LI中，div不相互对齐

我想要4个盒子，里面有天气信息。我对一切都很满意，但是盒子的顶部在不同的位置。我如何让他们排在最上面？完全是初学者。我不确定这是否是实现我想要的最好方式

ul{
列表样式：无；
位置：相对位置；
顶部：3em；
}
div{
边框：3倍纯白；
填充：10px 30px 10px 30px；
位置：30px；
保证金：自动；
显示：内联块；
宽度：100px；
高度：350px；
文本对齐：左对齐；
背景：灰色；
颜色：黑色；
}

城市名称


现在的
12摄氏度
手感：9摄氏度
大部分时间阳光明媚
今天
15℃高温
大部分时间阳光明媚
今晚
-63摄氏度
多云
细节
风寒：-5摄氏度
日出：05:00
日落：16:00

基线中内联元素的默认垂直对齐方式。将其更改为top（或基线以外的其他内容），然后它们排列：

ul{
列表样式：无；
位置：相对位置；
顶部：3em；
}
div{
边框：3倍纯白；
填充：10px 30px 10px 30px；
位置：30px；
保证金：自动；
显示：内联块；
宽度：100px；
高度：350px；
文本对齐：左对齐；
背景：灰色；
颜色：黑色；
垂直对齐：顶部；
}

城市名称


现在的
12摄氏度
手感：9摄氏度
大部分时间阳光明媚
今天
15℃高温
大部分时间阳光明媚
今晚
-63摄氏度
多云
细节
风寒：-5摄氏度
日出：05:00
日落：16:00

要添加到，您应该考虑使用更多的语义和可访问标记。而不是一个列表，使用<代码> <代码>元素和许多标题元素，考虑使用，以及具有适当标题的元素：


部分{
边框：3倍纯白；
填充：10px 30px 10px 30px；
位置：30px；
保证金：自动；
显示：内联块；
宽度：100px；
高度：350px；
文本对齐：左对齐；
背景：灰色；
颜色：黑色；
垂直对齐：顶部；
}
dt：之后{
内容:'：'；
}
dd{
边际：0.01米0；
}

城市名称
现在的
温度
12摄氏度
感觉
9摄氏度
条件
大部分时间阳光明媚
今天
高
15摄氏度
条件
大部分时间阳光明媚
今晚
低
-63摄氏度
条件
多云
细节
风寒
-5摄氏度
日出
05:00
日落
16:00
显示：内联块；垂直对齐：顶部虽然如果您正在寻找更好的方法，请使用flexbox或grid谢谢您，我将研究flexbox和grid