Django模板CSS样式不生效求助：文本对齐与宽度设置无效

核心问题分析 #

你的样式不生效主要由以下几个原因导致：

• HTML结构错误，引发浏览器样式解析异常
• 循环渲染时重复使用唯一ID，样式仅会作用于第一个匹配元素
• 单行文本场景下text-align: justify默认不生效

步骤1：修复HTML结构错误 #

原代码中<header>与<body>嵌套顺序错误，且<html>标签未闭合，修正后结构如下：

<html>
<head>
    <!-- 此处引入你的CSS文件，例如：<link rel="stylesheet" href="{% static 'css/your_style.css' %}"> -->
</head>
<body>
{% for item in post %}
<div class="post-item">
  <a href="{% url 'page_detail' item.pk %}" class="title-link">
      <h2 class="post-title">{{item.title}}</h2>
  </a>
  <h3 class="post-author">{{item.author}}</h3>
</div>
{% endfor %}
</body>
</html>

注意：将原有的ID全部替换为class——循环渲染时ID必须唯一，class才是用于批量设置样式的正确选择器。

步骤2：修正CSS样式 #

针对「两端对齐+宽度控制」的需求，调整CSS如下：

.post-title {
    text-align: justify;
    width: 20%;
    /* 让单行文本也能两端对齐的关键设置 */
    text-align-last: justify;
}

/* 兼容旧版浏览器的单行两端对齐方案 */
.post-title::after {
    content: "";
    display: inline-block;
    width: 100%;
}

.title-link {
    position: relative;
    text-decoration: none;
    color: black;
    font-family: lalezar;
}

.post-item {
    /* 可选：给每个帖子容器添加间距，优化排版 */
    margin-bottom: 15px;
}

关键说明 #

1. ID转class：循环中重复使用ID会导致浏览器仅识别第一个元素的样式，改用class后所有循环生成的元素都会正确应用样式。
2. 单行文本两端对齐：默认状态下text-align: justify仅对多行文本生效，通过text-align-last: justify或伪元素填充的方式，可实现单行文本的两端对齐效果。
3. 结构修正：正确的HTML结构是浏览器正常解析样式的基础，<head>用于引入资源，<body>承载页面内容。

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