如何对齐<p>标签中表格上方的文本？CSS设置无效求助

一、修复表格上方文本左对齐问题 #

你给p标签设置的text-align: left未生效，核心原因是包含这些p标签的父容器（比如承载左右表格的div）大概率设置了text-align: center，子元素的文本对齐样式被父级覆盖了。

可以通过两种方式解决：

1. 强制生效（快速调试用）：给text-align: left添加!important，强制覆盖父级样式

p {
  font-size: 20px;
  background-color: #cfc;
  padding: 0;
  margin: 0;
  text-align: left !important;
}

2. 规范修改（推荐）：针对父容器下的p标签单独设置样式，不影响父容器内其他元素的布局

/* 假设左右侧表格容器的类名为left、right，根据实际类名调整 */
.left p, .right p {
  text-align: left;
}

二、添加页面左右绿色条 #

如果需要实现页面两侧的绿色竖条，推荐用伪元素方案，不会干扰现有内容布局：

body {
  position: relative;
  margin: 0;
}
/* 左侧绿色条 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 20px; /* 条的宽度，可按需调整 */
  background-color: #cfc;
}
/* 右侧绿色条 */
body::after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 20px;
  background-color: #cfc;
}

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