使用Flexbox实现8个按钮2行4列排列并保留圆形样式的问题

问题原因 #

你遇到的两个问题分别由以下错误配置导致：

1. 布局变成4行2列：你给.achievements-item加的flex: 0 25%会强制元素基础宽度为父容器的25%，再叠加你设置的左右各1rem的margin，4个元素的总宽度远大于父容器100%宽度，无法在一行放下，就会频繁换行。
2. 圆形变形+文字显示异常：flex: 0 25%覆盖了你原本设置的2rem固定宽高，导致圆形比例失效；同时line-height: 6rem远大于元素2rem的高度，文字会溢出到元素外部无法正常显示。

修复后的完整代码 #

CSS 代码

.content-achievements {
  width: 100%;
  height: 30rem;
  position: relative;
  border: 1px solid black;
  border-radius: 25px;
  margin-left: 1.5rem;
  text-align: center;
}

.achievements-title {
  border: 1px solid black;
  border-radius: 1.5rem;
  width: 95%;
  margin: 1.5rem auto;
  height: 2.5rem;
  line-height: 2.5rem;
}

.achievements-list {
    border: 1px solid black;
    width: 95%;
    text-align: center;
    margin: 0 auto;
    border-radius: 1.5rem;
    margin-bottom: 1rem;
}

.achievements-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    margin: 1rem 0;
    padding: 0; /* 清除ul默认左内边距 */
}

.achievements-item {
    list-style: none; /* 清除li默认圆点标记 */
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #000;
    line-height: 2rem; /* 与高度一致，实现文字垂直居中 */
    margin: 1rem; /* 上下左右都加1rem间距，保证行列间距均匀 */
    width: 2rem;
    height: 2rem;
}

HTML 代码

<div class="content-achievements">
    <div class="achievements-title">
        Game Achievements
    </div>
    <div class="achievements-list">
        <ul class="achievements-items">
            <li class="achievements-item">1</li>
            <li class="achievements-item">achiev2</li>
            <li class="achievements-item">achiev3</li>
            <li class="achievements-item">achiev4</li>
            <li class="achievements-item">achiev5</li>
            <li class="achievements-item">achiev6</li>
            <li class="achievements-item">achiev7</li>
            <li class="achievements-item">achiev8</li>
        </ul>
    </div>
</div>

核心修改点 #

• 清除了ul默认的左内边距和li默认的列表圆点样式，避免多余样式干扰布局
• 删除了错误的flex: 0 25%配置，保留2rem固定宽高保证圆形样式不变
• 将line-height调整为和元素高度一致的2rem，让文字垂直居中显示在按钮内部
• 把按钮的margin调整为上下左右各1rem，保证行列之间的间距均匀，8个按钮会自动分为2行4列排列。

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