gpt4 book ai didi

html - CSS 网格布局被隐藏的 child 破坏了

转载 作者:太空宇宙 更新时间:2023-11-04 05:55:45 24 4
gpt4 key购买 nike

如果 CSS 包含可动态显示的元素,我该如何避免布局损坏?隐藏按钮将编辑按钮移到左侧,而我希望它会粘在网格的右边缘。

<html>
<body>
<div style="width: 250px; border: 1px solid #ccc; display: grid; grid-template-columns: repeat(3, min-content) auto min-content;">
<button _style="display: none;">A</button>
<button>B</button>
<button>C</button>
<div></div>
<button style="margin: auto; padding: 5px;">Edit</button>
</div>
</body>
</html>

最佳答案

只需将按钮 "Edit" margin: auto 属性更改为 margin-left: auto

结果:https://jsbin.com/qazekayahu/1/edit?html,output

附言为什么要使用 CSS Grid 进行一维布局? Flexbox 是更好的解决方案。

<html>

<body>
<div style="width: 250px; border: 1px solid #ccc; display: grid; grid-template-columns: repeat(3, min-content) auto min-content;">
<button style="display: none;">A</button>
<button>B</button>
<button>C</button>
<div></div>
<button style="margin-left: auto; padding: 5px;">Edit</button>
</div>
</body>

</html>

关于html - CSS 网格布局被隐藏的 child 破坏了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57824257/

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