为什么即使盒子里有足够的空间，justify-items 也不能在 css 网格中工作？

Question

我是编码新手，我非常了解 html/css，但由于某种原因，我无法弄清楚为什么即使容器中有空间，我也无法让我的内容证明到框的末尾。 为了确定，我什至在元素周围放置了一个边框。 请帮我解决这个问题。

这是我的 html：

<html lang="en">

<head>
  <link href="./resources/css/index.css" rel="stylesheet">
  </link>
  <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>Bryan Portfolio</title>
</head>

<body>
  <header>
    <div id="grid1">
      <div class="spacer-left"></div>
      <div class="header-left"><img id="logo" src="./resources/logo/letterLogo.png"></div>
      <div class="header-right">
        <ul class="social-media">
          <li><img class="sm-icon" src="./resources/images/facebook-black.png"></li>
          <li><img class="sm-icon" src="./resources/images/facebook-black.png"></li>
          <li><img class="sm-icon" src="./resources/images/facebook-black.png"></li>
        </ul>
        <ul class="nav">
          <li>Main</li>
          <li>Projects</li>
          <li>Videos</li>
          <li>Photography</li>
        </ul>
      </div>
      <div class="spacer-right"></div>

    </div>

  </header>
  <div id="jumbotron">

  </div>

</body>

</html>

这是我的 css：

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 body{
   background: color #f8f8f8;
   color: #262626;
 }
 
header{padding-top: 20px;}

#grid1{ 
 display: grid;
 grid-template-columns: 5% 1fr 1fr 5%;
 grid-auto-rows: 50px;
 grid-row-start: 1;
 grid-row-end: 3;

}
.header-left{
 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 1;
 grid-row-end: 3;
}
.header-right{
 
justify-self: end;
align-self: center;
 grid-column-start: 3;
 grid-column-end: 4;
 grid-row-start: 1;
 grid-row-end: 3;
 
}

.social-media{
 border: 1px red solid;
 grid-row-start: 1;
 grid-row-end: 2;
}

nav{
 grid-row-start: 2;
 grid-row-end: 3;
}
li{
 display: inline;
}
#logo{
 max-height: 100px;

}
.sm-icon{
max-height: 25px;
border: 1px blue solid;
}

Answer 1

.social-media不是网格布局。 容器占据整行，但默认情况下内联元素将从左侧开始。 您可以使用 flexbox 将项目对齐到末尾（右）：

.social-media {
  display: flex;
  justify-content: flex-end;
}

Answer 2

.social-media {
  text-align: right;
}
   //or
.social-media {
   display: flex;
   justify-content: flex-end;
}

 * { margin: 0; padding: 0; box-sizing: border-box; } body{ background: color #f8f8f8; color: #262626; } header{padding-top: 20px;} #grid1{ display: grid; grid-template-columns: 5% 1fr 1fr 5%; grid-auto-rows: 50px; grid-row-start: 1; grid-row-end: 3; }.header-left{ grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }.header-right{ justify-self: end; align-self: center; grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; }.social-media{ border: 1px red solid; grid-row-start: 1; grid-row-end: 2; text-align: right; } nav{ grid-row-start: 2; grid-row-end: 3; } li{ display: inline; } #logo{ max-height: 100px; }.sm-icon{ max-height: 25px; border: 1px blue solid; }

 <html lang="en"> <head> <link href="./resources/css/index.css" rel="stylesheet"> </link> <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>Bryan Portfolio</title> </head> <body> <header> <div id="grid1"> <div class="spacer-left"></div> <div class="header-left"><img id="logo" src="./resources/logo/letterLogo.png"></div> <div class="header-right"> <ul class="social-media"> <li><img class="sm-icon" src="./resources/images/facebook-black.png"></li> <li><img class="sm-icon" src="./resources/images/facebook-black.png"></li> <li><img class="sm-icon" src="./resources/images/facebook-black.png"></li> </ul> <ul class="nav"> <li>Main</li> <li>Projects</li> <li>Videos</li> <li>Photography</li> </ul> </div> <div class="spacer-right"></div> </div> </header> <div id="jumbotron"> </div> </body> </html>

 * { margin: 0; padding: 0; box-sizing: border-box; } body{ background: color #f8f8f8; color: #262626; } header{padding-top: 20px;} #grid1{ display: grid; grid-template-columns: 5% 1fr 1fr 5%; grid-auto-rows: 50px; grid-row-start: 1; grid-row-end: 3; }.header-left{ grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }.header-right{ justify-self: end; align-self: center; grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; }.social-media{ border: 1px red solid; grid-row-start: 1; grid-row-end: 2; display: flex; justify-content: flex-end; } nav{ grid-row-start: 2; grid-row-end: 3; } li{ display: inline; } #logo{ max-height: 100px; }.sm-icon{ max-height: 25px; border: 1px blue solid; }

 <html lang="en"> <head> <link href="./resources/css/index.css" rel="stylesheet"> </link> <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>Bryan Portfolio</title> </head> <body> <header> <div id="grid1"> <div class="spacer-left"></div> <div class="header-left"><img id="logo" src="./resources/logo/letterLogo.png"></div> <div class="header-right"> <ul class="social-media"> <li><img class="sm-icon" src="./resources/images/facebook-black.png"></li> <li><img class="sm-icon" src="./resources/images/facebook-black.png"></li> <li><img class="sm-icon" src="./resources/images/facebook-black.png"></li> </ul> <ul class="nav"> <li>Main</li> <li>Projects</li> <li>Videos</li> <li>Photography</li> </ul> </div> <div class="spacer-right"></div> </div> </header> <div id="jumbotron"> </div> </body> </html>