按钮无法向右对齐，使用text-align等属性无效应如何解决？

问题根因 #

你给.question-title添加了d-flex启用flex布局后，两个子元素<p>和<button>默认仅占据自身内容宽度，你把justify-content-right加在了按钮子元素上，而这个属性是flex容器属性，仅作用于父元素，所以不生效。

解决方案（任选其一即可） #

方案1：让标题占满剩余空间 #

给标题p标签添加flex属性自动占据容器剩余空间，按钮会被直接挤到最右侧，同时你可以额外加垂直对齐属性让样式更规整：

.question-title p {
  /* 占满剩余宽度 */
  flex: 1;
  /* 可选：让文字和按钮垂直居中对齐 */
  align-self: center;
}

方案2：给flex父容器加两端对齐属性 #

直接给flex父容器.question-title设置两端对齐，自动让标题居左、按钮居右：

.question-title {
  justify-content: space-between;
  /* 可选：让标题和按钮垂直居中对齐 */
  align-items: center;
}

两种方案都可以达到你要的[+]图标固定右对齐、不受标题文字长度影响的效果，不需要修改现有HTML结构。

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