如何实现文本框内文本的水平对齐？使用text-align:right无效的解决方案

你现在遇到的问题核心很明确：你的CSS代码里没有给评论区的textarea添加text-align: right属性，另外你的CSS存在重复定义的情况，这可能也会干扰样式的正常生效。我来一步步帮你解决：

第一步：清理重复的CSS规则 #

你写了两遍#respond和表单输入元素的样式，后面的width: 50%会直接覆盖前面的width: 100%，建议合并成一套规则，避免样式冲突：

#respond { 
  margin-top: 40px; 
}

#respond input[type='text'], 
#respond input[type='email'], 
#respond textarea { 
  margin-bottom: 10px; 
  display: block; 
  width: 50%; /* 保留你想要的宽度，需要100%的话直接修改即可 */
  border: 1px solid rgba(0, 0, 0, 0.1); 
  border-radius: 5px; /* 现代浏览器无需前缀，统一写这个就够用 */
  line-height: 1.4em; 
}

第二步：添加右对齐属性 #

如果只想让评论内容的textarea右对齐，单独给它加一条规则就行：

#respond textarea {
  text-align: right;
}

要是想让所有输入框（姓名、邮箱、评论）都右对齐，也可以把text-align: right直接合并到上面的表单元素统一规则里。

万一还是不生效？ #

如果添加后样式依然没起作用，大概率是有其他更高优先级的CSS规则覆盖了它。这种情况下可以试试提高选择器的优先级，直接定位到textarea的id：

#respond #comment {
  text-align: right !important; /* 尽量少用!important，只有其他方法都无效时再用 */
}

这样精准定位到评论框，优先级足够高，基本就能生效了。

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