gpt4 book ai didi

html - Grid::右对齐网格项

转载 作者:行者123 更新时间:2023-11-28 10:25:25 27 4
gpt4 key购买 nike

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

.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的末尾?

最佳答案

问题是..您将网格宽度设置为 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

关于html - Grid::右对齐网格项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53532135/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com