开发BlogApp时upvote与downvote按钮无法上下相对对齐问题

安全阿岳

2026-10-7

解决上下投票按钮对齐问题

问题核心原因

默认span为行内元素，两个按钮会横向排列而非上下堆叠
上下两个图标应用的样式类不一致，尺寸属性存在差异
Font Awesome 箭头图标默认基线对齐会产生垂直偏移

修复步骤

第一步：统一两个图标样式类

先修正模板代码中两个i标签的类不一致问题，避免尺寸差异导致错位：

<!-- Upvote button -->
<span id="id_likes{{topic.id}}">
    {% if user in topic.likes.all %}
    <button name='submit' type='submit' value="like"><i class="btn fas fa-sort-up fa-6x fa-lg post-buttons"></i></button>
    {% endif %}
</span>

<!-- DownVote button -->
<span id="id_dislikes{{topic.id}}">
    {% if user in topic.dislikes.all %}
    <button name='submit' type='submit' value="dislike"><i class="btn fas fa-sort-down fa-6x fa-lg post-buttons"></i></button>
    {% endif %}
</span>

第二步：添加外层父容器包裹投票按钮

给两个span外层加一个父容器，用flex布局控制垂直对齐：

<!-- 新增父容器 -->
<div class="vote-group">
    <!-- 原Upvote按钮代码 -->
    <!-- 原DownVote按钮代码 -->
</div>

第三步：补充对应CSS样式

在原有样式基础上添加以下代码：

button {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 投票组容器样式 */
.vote-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px; /* 调整两个按钮的上下间距 */
}
/* 统一图标行高避免偏移 */
.vote-group .fas {
    line-height: 1;
}