Grid ::右对齐网格项

时间:2018-11-29 05:00:09

标签: css html5 grid

通过使用按钮右侧的网格位置。谁能指出我正确的方向?

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100px;
}
<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>

在上述情况下,如何将两个按钮移到父div的末尾?

3 个答案:

答案 0 :(得分:2)

问题是..您已将网格宽度设置为100px

请改为在网格内设置列width:100px,因为网格是容器,还可以使用justify-content:end;将内容对齐到右侧。

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100%;
  grid-template-columns: 100px 100px;
  justify-content: end;
}
 button{display:inline-block;}
 
<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>

参考:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

答案 1 :(得分:1)

使用justify-content: end;grid-template-columns: 100px 100px;

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100%;
  grid-template-columns: 100px 100px;
  justify-content: end;
}
<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>

答案 2 :(得分:1)

希望这对您有帮助!

.container {
  width: 500px;
  border: 1px solid red;
}

.grid {
  display: grid;
  grid-gap: 5px;
  grid-auto-flow: column;
  width: 100px;
  margin: 0 0 0 auto; //added
}
<div class="container">
  <div class="grid">
    <button>test 1</button>
    <button>test 2</button>
  </div>
</div>