首页 > 解决方案 > 为什么表格的一个文本元素与其他元素不对齐?

问题描述

我正在使用 Django 制作基于游戏节目的游戏,并希望用户能够选择要播放的特定剧集。有问题的页面是在用户从数据库中选择了一年之后,当他们选择了他们想要玩的月份时。出于某种原因,无论选择哪一年,三月总是与文本的其余部分不一致。如果 3 月是第一个、第二个或第三个可用月份,则会发生这种情况。我没有将它的样式与其他样式不同,当我单击检查时,它会随机与其余部分对齐(附图片)。我附上了 episode_month.html 和 main.css 中的代码。如果有人可以帮助我调整本月或提供有关为什么它高于其他人的见解,我将不胜感激 - 这让我发疯了!

episode_months.html:

{% extends "game/base.html" %}
{% load static %}
{% block content %}
    <div class = "mode">Available Months</div>
    <div class = "mode_info">{{ year }}</div>
    <table class = "board">
        {% for month_group in months %}
            <tr class = "row">
            {% for month in month_group %}
                {% if month != "" %}
                    <th class = "tile-months board_cat">
                        <a class = board_month href="/episode_mode/{{year}}/{{month.0}}/"> &nbsp; {{ month.1 }} &nbsp; </a>
                    </th>
                {% else %}
                    <th class = "tile-months board_month"></th>
                {% endif %}
            {% endfor %}
            </tr>
        {% endfor %}
    </table>
{% endblock content %}

main.css(相关):

.board {
    flex: 1;
    position: static;
    margin-left: auto;
    margin-right: auto;
    width: 75%;
    height: 75%;
    display: grid;
    flex-wrap: nowrap;
    justify-content: center;
  }
    
  .row {
    flex: 1;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    flex-direction: row;
  }
.tile-months {
    width: 200px;
    height: 250px;
    padding: 2%;
    margin: auto;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'Swiss 911';
    background: #060ce9;
    border: 3px solid #000;
  }

  .board_month {
    font-size: 2.5vw;
    color: #FFCC00;
    padding: 5px 5px 5px 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
  }

月表 检查页面

标签: htmlcssdjango

解决方案


推荐阅读