html - Upvote 和 downvote 按钮没有相互显示

Question

我正在构建一个 BlogApp 并且我正在尝试制作 upvote 和 downbutton ，就像 Stack Overflow 显示但我的按钮没有显示opposite one another。

它们显示如下：

模板.html

<!-- 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="fas fa-sort-down fa-6x"></i></button>
            {% endif %}
        </span>

当我使用div而不是spanthen 它显示如下：

它在按钮上显示边框，然后我使用：

<style>

button {
    padding: 0;
    border: none;
    background: none;
}

</style>

任何帮助将非常感激。

标签： htmlcss

Answer 1

我删除了您的动态代码并添加了一个 css 类。

button {
    padding: 0;
    border: none;
    background: none;
}
.btnOuter{
  display: block;
  overflow: hidden;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<span>
    <button class="btnOuter" name='submit' type='submit' value="like">
      <i  class="fas fa-sort-up fa-6x fa-lg post-buttons" ></i>
    </button>
  </span>
  <span>
    <button class="btnOuter" name='submit' type='submit' value="dislike">
      <i class="fas fa-sort-down fa-6x"></i>
    </button>
  </span>