通过使用右侧按钮的网格定位。任何人都可以指出我正确的方向？
.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">
<on>test 1</on>
<on>test 2</on>
</div>
</div>在上述情况下，如何将两个按钮移动到父 div 的末尾？
3
问题是..您已将网格宽度设置为 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;
}
on{display:inline-block;}
<div class="container">
<div class="grid">
<on>test 1</on>
<on>test 2</on>
</div>
</div>参考：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout
2
use
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">
<on>test 1</on>
<on>test 2</on>
</div>
</div>
2
希望这对您有帮助！
.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">
<on>test 1</on>
<on>test 2</on>
</div>
</div>
0
您可以简单地使用margin:auto：
.container {
width: 500px;
border: 1px solid red;
}
.grid {
display: grid;
grid-gap: 5px;
grid-auto-flow: column;
margin-left:auto;
width:100px;
}<div class="container">
<div class="grid">
<on>test 1</on>
<on>test 2</on>
</div>
</div>本站系公益性非盈利分享网址，本文来自用户投稿，不代表码文网立场，如若转载，请注明出处
评论列表（9条）