如何实现按钮分两列布局，使左右按钮处于同一水平层级？

问题描述 #

需要实现按钮的两列布局：左侧放置4个按钮，右侧放置2个按钮。当前右侧按钮整体位于左侧按钮的下方（位置保持靠右），希望调整为左右两列的按钮顶部处于同一水平高度。

• 当前效果：右侧按钮区域整体下移，未与左侧顶部按钮对齐
• 预期效果：左右两列并排，顶部对齐，左侧4个按钮垂直排列，右侧2个按钮垂直排列

当前使用的CSS代码 #

body {
    background-color: #292929;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
    color: #FFFFFF;
}

div {
    display: block;
}

div.container {
    position: relative;
    width: 100%;
    max-width: 600px;
    text-align: center;
    margin: auto;
    padding: auto;
    box-sizing: border-box;
}

.button,
button {
    display: inline-block;
    text-decoration: none;
    height: 48px;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    width: 300px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0.1px;
    white-space: wrap;
    border-radius: 8px;
    cursor: pointer;
}

button:hover,
.button:focus {
    color: #333;
    border-color: #888;
    outline: 0;
}

.button_social,
button_social {
    display: inline-block;
    text-decoration: none;
    height: 48px;
    text-align: center;
    margin-right: 1150px;
    vertical-align: middle;
    font-size: 18px;
    width: 300px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0.1px;
    white-space: wrap;
    border-radius: 8px;
    cursor: pointer;
}

button_social:hover,
.button_social:focus {
    color: #333;
    border-color: #888;
    outline: 0;
}

.button_discord,
button_discord {
    display: inline-block;
    text-decoration: none;
    height: 48px;
    text-align: center;
    margin-left: 350px;
    vertical-align: middle;
    font-size: 18px;
    width: 300px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0.1px;
    white-space: wrap;
    border-radius: 8px;
    cursor: pointer;
}

button_discord:hover,
.button_discord:focus {
    color: #333;
    border-color: #888;
    outline: 0;
}

.button.button-primary {
    color: #FFF;
    filter: brightness(90%)
}

.icon {
    padding: 0px 8px 3.5px 0px;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}

.button_social.button-discord {
    color: #FFFFFF;
    background-color: #5865F2
}

.button_social.button-discord:hover,
.button_social.button-discord:focus {
    filter: brightness(90%)
}


/* Github */
.button_social.button-github {
    color: #FFFFFF;
    background-color: #000000
}

.button_social.button-github:hover,
.button_social.button-github:focus {
    filter: brightness(90%)
}

/* Twitch */
.button_social.button-twitch {
    color: #FFFFFF;
    background-color: #9146ff
}

.button_social.button-twitch:hover,
.button_social.button-twitch:focus {
    filter: brightness(90%)
}

/* YouTube */
.button_social.button-youtube {
    color: #FFFFFF;
    background-color: #000000
}

.button_social.button-youtube:hover,
.button_social.button-youtube:focus {
    filter: brightness(90%)
}

解决方法 #

问题根源是用大margin值强行定位按钮，导致布局错位。改用Flexbox布局可以轻松实现需求，步骤如下：

1. 调整HTML结构 #

将左右按钮分别放入独立的列容器中，示例结构：

<div class="container">
  <div class="button-column left">
    <!-- 左侧4个按钮 -->
    <a class="button_social button-github" href="#"><span class="icon"></span>Github</a>
    <a class="button_social button-twitch" href="#"><span class="icon"></span>Twitch</a>
    <a class="button_social button-youtube" href="#"><span class="icon"></span>YouTube</a>
    <a class="button_social button-xxx" href="#"><span class="icon"></span>其他按钮</a>
  </div>
  <div class="button-column right">
    <!-- 右侧2个按钮 -->
    <a class="button_discord button-discord" href="#"><span class="icon"></span>Discord</a>
    <a class="button_discord button-xxx" href="#"><span class="icon"></span>其他按钮</a>
  </div>
</div>

2. 修改容器CSS为Flex布局 #

更新.container的样式，启用Flex并设置对齐方式：

div.container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: auto;
    box-sizing: border-box;
    display: flex;
    gap: 20px; /* 两列之间的间距，可按需调整 */
    justify-content: center;
}

3. 添加列容器样式 #

让每列内部的按钮垂直排列：

.button-column {
    display: flex;
    flex-direction: column;
    gap: 10px; /* 按钮之间的垂直间距，可按需调整 */
}

4. 清理冗余样式 #

删除.button_social和.button_discord中用于定位的margin值，并修正语法错误（button_social这类选择器需要加.，因为是类选择器）：

.button_social {
    display: inline-block;
    text-decoration: none;
    height: 48px;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    width: 300px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0.1px;
    white-space: wrap;
    border-radius: 8px;
    cursor: pointer;
}

.button_social:hover,
.button_social:focus {
    color: #333;
    border-color: #888;
    outline: 0;
}

.button_discord {
    display: inline-block;
    text-decoration: none;
    height: 48px;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    width: 300px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0.1px;
    white-space: wrap;
    border-radius: 8px;
    cursor: pointer;
}

.button_discord:hover,
.button_discord:focus {
    color: #333;
    border-color: #888;
    outline: 0;
}

这样修改后，左右两列会自动顶部对齐，按钮按垂直方向排列，完全符合预期布局。

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