Html 如何将li元素扩展到容器大小？

我有以下HTML：

#主菜单{
背景颜色：蓝色；
边框：1px纯黑；
宽度：600px；
}
.菜单{
列表样式：无外无；
文本对齐：居中；
}
.菜单项{
浮动：左；
}
.菜单项a{
边框：1px纯红；
}

首先从

菜单中删除所有边距和填充。由于菜单中有四个项目，请将
宽度：25%
添加到
菜单项中。我在





我已经为您更新了代码笔代码

CSS

#main-menu {
  background-color: blue;
  border: 1px solid black;
  width: 600px;
  overflow: hidden;
}
ul, li{
  margin:0;
    padding:0;
}
.menu {
  list-style: none outside none;
  text-align: center;
}

.menu-item {
  float: left; 
  width:25%;
}

.menu-item a {
  border: 1px solid red;  
}

确保正确重置CSS并使用
框大小：边框框
属性

此选项的优点是不需要在
li


*{
保证金：0；
填充：0；
框大小：边框框；
}
#主菜单{
背景颜色：蓝色；
边框：1px纯黑；
宽度：600px；
}
.菜单{
列表样式：无外无；
文本对齐：居中；
显示：表格；
宽度：100%；
}
.菜单项{
显示：表格单元格；
}
.菜单项a{
边框：1px纯红；
颜色：白色；
显示：块；
}