如何让menu菜单填满父div宽度、子元素等间距且与下方test div边缘对齐

修改方案 #

你可以按以下规则修改代码实现需求：

• 移除.menu中冗余的display: inline-block属性，仅保留display: flex即可
• 给.menu新增width: 100%、margin: 0属性：前者确保菜单占满父容器.row的800px宽度，后者清除ul标签自带的浏览器默认外边距，避免和下方.test块错位
• 将li的width: 100%替换为flex: 1，让所有li平均分配菜单总宽度，自动实现等宽、间距均等的效果
• 可选：给li新增text-align: center属性让文字水平居中，视觉效果更匹配常规菜单样式

修改后完整代码

.row {
  width: 800px;
}

.menu {
  display: flex;
  list-style: none;
  padding: 0;
  width: 100%;
  margin: 0;
}

li {
  flex: 1;
  text-align: center;
}

.test {
  width: 800px;
  background-color: red;
}

<div class="row">
  <ul class="menu">
    <li>Test</li>
    <li>Test2</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>
    <li>Test6</li>
    <li>Test7</li>
  </ul>
</div>
<div class="test">
  <p>&nbsp;</p>
</div>

修改后菜单总宽度和下方.test块均为800px，左右边缘完全对齐，7个li宽度完全相等，间距自然均等，符合需求。

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