CSS Grid布局justify-content:end失效 如何将按钮对齐到div右侧

对齐属性不生效是三个问题叠加导致的：

• justify-content、justify-items这类对齐属性仅对设置了display: flex/display: grid的容器生效，你的.right-div是默认的块级元素，没有声明flex/grid布局，写的对齐规则不会被浏览器解析执行。
• 外层.line-div的grid列宽设置溢出：容器总宽度设为300px，但grid-template-columns写的是300px 80px，两列加起来总宽度380px超出容器范围，第二列（放按钮的列）本身布局被挤压，无法正常展示对齐效果。
• HTML结构缺失闭合标签：.line-div没有写对应的</div>结束标签，浏览器解析DOM时会出现结构异常，干扰布局渲染。

按以下点修改代码即可实现按钮靠右对齐：

1. 修正外层grid的列宽规则，避免宽度溢出，比如将第一列设为1fr自适应占满剩余空间，第二列保留固定宽度，总宽度和容器300px的设置匹配
2. 给.right-div声明display: grid或display: flex布局，让你写的对齐属性可以正常生效
3. 补上缺失的.line-div闭合标签

修复后的完整可运行代码：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Exercise 12a</title>
    <style>
      .line-div {
        display: grid;
        /* 修正列宽，避免总宽度溢出容器 */
        grid-template-columns: 1fr 80px;
        align-items: center;
        width: 300px;
        background-color: gray;
      }
      .left-div{
        font-family: arial;
        font-size: 19px;
        margin-left:15px;
      }
      .description{
        margin-top: 0;
        margin-bottom: 0;
      }
      .right-div{
        vertical-align: middle;
        /* 声明grid布局让对齐属性生效 */
        display: grid;
        justify-items: end;
        /* 用flex布局的话替换成下面两行即可，效果一致
        display: flex;
        justify-content: end;
        */
        padding: 4px 0;
      }
      .number{
        background-color: rgb(0, 89, 255);
        border-style: none;
        font-family: Arial;
        font-size: 18px;
        color: white;
        padding-left: 13px;
        padding-right: 13px;
        padding-top: 4px;
        padding-bottom: 4px;
        border-radius: 13px;
      }
    </style>
  </head>
  <body>
    <div class="line-div">
      <div class="left-div"><p class="description">Home</p></div>
      <div class="right-div">
        <button class="number">14</button>
      </div>
    </div> <!-- 补全缺失的闭合标签 -->
 </body>
</html>

如果不需要嵌套两层div做额外样式控制，可以直接在外层grid上设置对齐规则，代码更精简：

.line-div {
  display: grid;
  grid-template-columns: 1fr 80px;
  align-items: center;
  width: 300px;
  background-color: gray;
  /*  grid子项默认右对齐 */
  justify-items: end;
}
.left-div{
  /* 单独给左侧列设置左对齐，覆盖默认右对齐规则 */
  justify-self: start;
  font-family: arial;
  font-size: 19px;
  margin-left:15px;
}

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