CSS布局问题：.agenda类元素无法像.menu类一样横向排列

首先明确：你提到的.menu元素能实现同行居中，大概率是用到了Flex布局，或是将子元素设置为行内/行内块元素，而.agenda没做对应的设置，常见原因有以下几点：

• .agenda下的Xu、Xalana、Free Willy这些子元素默认是块级元素（比如未设置样式的div、p、li），块级元素会自动独占一行，自然无法同行排列。而.menu的子元素应该是添加了display: inline-block属性，或是.menu容器用了display: flex来让子元素横向排布。
• .agenda容器没设置居中规则：如果.menu是靠display: flex; justify-content: center;实现整体居中，那.agenda没添加这两行属性的话，就算子元素能同行，也不会居中；如果.menu是靠text-align: center配合子元素的行内块属性实现居中，那.agenda没加text-align: center也会导致不居中。
• 子元素的宽度或外边距问题：如果.agenda的子元素设置了固定宽度，总宽度超过容器宽度会被迫换行；或是子元素带有默认的上下外边距，干扰了横向排列的布局。
• .agenda可能继承了其他干扰样式：比如被设置了display: block且未开启Flex，或是带有float属性，导致子元素无法正常横向排列。

内容的提问来源于stack exchange，提问作者alejandro carnero