如何让点赞与点踩按钮在同一行显示并兼容hover动画？

问题说明 #

需要将点赞（like）和点踩（dislike）按钮放在同一行显示，按钮具备鼠标悬停时宽度放大、显示文字的动画效果，当前未找到合适的布局方案。

解决方案 #

步骤1：修改HTML结构 #

给两个按钮添加弹性布局容器，确保它们横向排列：

<!DOCTYPE html>
<html>
<body>
  <div class="post">
    <img>
    <p>username</p>
    <p>this is a placeholder text</p>
    <!-- 新增按钮容器 -->
    <div class="vote-buttons">
      <a class="dislike" href="#disliked">
        <img src="dislikeIcon.png" class="dislikeIcon" draggable="false">
        <p class="dislikeText">dislike</p>
      </a>

      <a class="like" href="#liked">
        <img src="likeIcon.png" class="likeIcon" draggable="false">
        <p class="likeText">like</p>
      </a>
    </div>
  </div>
</body>
</html>

步骤2：优化CSS样式 #

添加容器的弹性布局样式，精简按钮重复代码，确保悬停动画正常且按钮不会互相挤压：

div.post{
    background-color: #DBDBDB;
    padding: 15px; /* 增加内边距优化视觉 */
}

/* 按钮容器：横向排列按钮，设置间距 */
.vote-buttons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

/* 提取按钮公共样式，减少冗余 */
.like, .dislike {
    width: 35px;
    height: 35px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.5s ease;
    overflow: hidden;
    text-decoration: none;
}

.like:hover, .dislike:hover {
    width: 100px;
}

.likeIcon, .dislikeIcon {
    background-size: contain;
    padding-top: 3px;
    width: 20px;
    height: 20px;
}

.likeText, .dislikeText {
    display: none;
    margin-left: 10px;
    text-decoration: none;
    font-family: amble-bold, sans-serif;
    color: white;
    text-transform: uppercase;
}

.like:hover .likeText,
.dislike:hover .dislikeText {
    display: flex;
    transition: display 0s 0.1s; /* 调整延迟让动画更流畅 */
}

/* 单独设置按钮背景色 */
.like {
    background-color: #34aacf;
}

.dislike {
    background-color: #DB4349;
}

关键说明 #

• .vote-buttons 使用flex布局实现按钮横向排列，gap属性保证初始状态下按钮有足够间距，避免悬停时互相挤压。
• 提取按钮公共样式，减少代码冗余，同时仅针对width设置过渡属性，提升动画性能。
• 调整文字显示的延迟时间，避免文字突然出现的突兀感，让整体动画更自然。

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