html - 为什么表格的一个文本元素与其他元素不对齐?
问题描述
我正在使用 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}}/"> {{ month.1 }} </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;
}
解决方案
推荐阅读
- javascript - 带有变量和查找的 Jquery 选择器
- reactjs - 通过反应链接传递参数时,这里有点问题,我有“TypeError:无法读取未定义的属性'位置'”
- flutter - 由于上下文问题,无法从子类访问 bloc?
- javascript - 关于自定义 Blob 对象 URL
- javascript - 这是使用事件源的正确方法吗?
- html - 检查文本字段中是否输入了任何 html 标签或 javascript 代码
- r - 比较纵向数据集中连续行中的值
- ios - 如何为键盘扩展创建单元测试
- r - 使用 purrr::map() 更改和分配新变量名
- wmi - 如何正确查询 WMI 对象