Html 我如何水平对齐我的盒子？

我已经创建了3个盒子。与UL/LI合作。但它似乎并没有水平排列

我试过，

float:right和
显示：内联块两者都不对齐




这是我的密码


#框1{
高度：300px；
宽度：250px；
背景颜色：灰色；
显示：内联块
}
#框2{
高度：300px；
宽度：250px；
背景颜色：灰色；
显示：内联块
}
#框3{
高度：300px；
宽度：250px；
背景颜色：灰色；
显示：内联块
}
.boxy{
列表样式：无；
显示：内联块；
}

阿斯卡摄影














您需要将li标记显示为内联块，这是因为浏览器将所有li默认为块类型元素

.boxy > li {
    list-style: none;
    display: inline-block;
}

您需要执行以下操作：

.boxy {
  display: flex;
  justify-content: space-between;
}

#box1, #box2, #box3 {
  display: inline-block;
}

.boxy > li { display: inline-block; }

查看flex及其使用的更多详细信息。当您需要页面上响应迅速、间隔均匀的项目时，它是一个非常简洁的小工具。
您只需将以下内容添加到
。boxy
：

文本对齐：居中

并将属性
display:inline block
更改为
中的
display:block

你自己看，我已经在你的代码中编辑了上面的内容，它工作得非常好


#框1{
高度：300px；
宽度：250px；
背景颜色：灰色；
显示：内联块
}
#框2{
高度：300px；
宽度：250px；
背景颜色：灰色；
显示：内联块
}
#框3{
高度：300px；
宽度：250px；
背景颜色：灰色；
显示：内联块
}
.boxy{
列表样式：无；
显示：块；
文本对齐：居中；
}

阿斯卡摄影














使用下面的代码：它将帮助您
#框1{
高度：300px；
宽度：250px；
背景颜色：灰色；
显示：内联块；
右边距：10px；
}
#框2{
高度：300px；
宽度：250px；
背景颜色：灰色；
显示：内联块；
右边距：10px；
}
#框3{
高度：300px；
宽度：250px；
背景颜色：灰色；
显示：内联块
}
.boxy{
列表样式：无；
显示器：flex；
宽度：100%；
}
问题在于您没有更改那些
标记的显示类型。正是它们需要设置为
display:inline块

因此，基本上您可以从
#box1
、
#box2
和
#box3
中去掉显示属性。而是添加以下内容：

.boxy {
  display: flex;
  justify-content: space-between;
}

#box1, #box2, #box3 {
  display: inline-block;
}

.boxy > li { display: inline-block; }

它是这样表述的。但仍然不工作我删除了所有显示：内联块；除父div外的所有框的代码，即“.boxy”