css 网格上的固定大小按钮
[英]Fixed size button on css grid
问题描述
document.getElementById("card-btn").onclick = function() { myFunction() }; function myFunction() { document.getElementById("card-btn").innerHTML = "A little bit longer text"; }
.grid-container { display: grid; grid-gap: 1em; grid-template-columns: repeat(4, minmax(30px, auto)); grid-template-rows: repeat(4, minmax(30px, auto)); grid-auto-rows: minmax(50px, auto); height: 100vh; grid-template-areas: "card1 card2 card3 . card4" "card5 card5 card5 card5 card5" "card6 . . . card7" "card8 card8 card8 card8 card8"; } .grid-container div { background-color: red; } #card1 { grid-area: card1; } #card-btn { width: 100%; } #card2 { grid-area: card2; } #card3 { grid-area: card3; } #card4 { grid-area: card4; } #card5 { grid-area: card5; } #card6 { grid-area: card6; } #card7 { grid-area: card7; } #card8 { grid-area: card8; }
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div class="grid-container"> <div id="card1"> <button type="button" id="card-btn"> Short text </button> </div> <div id="card2"> card2 </div> <div id="card3"> card3 </div> <div id="card4"> card4 </div> <div id="card5"> card5 </div> <div id="card6"> card6 </div> <div id="card7"> card7 </div> <div id="card8"> card8 </div> </div> </body> </html>
我使用-template-areas创建了简单的网格。 在“第一个单元格”中，我放了一个按钮。 单击按钮时，其上的文本会发生变化（变长），以及其宽度大小。 这就是我的问题。
如果有足够的空间来容纳新文本（单击后）而不扩大其宽度，为什么按钮会改变其大小？
我知道按钮的width: 100%为width: 100% ，我可以使用一些静态值，例如 fe width: 250px 。 我对该解决方案不感兴趣的原因是，当我使用 ng-bootstrap: dropdown component并将其宽度设置为100% ，当其上的文本宽度增加时，它没有更改按钮大小。 这就是我认为的原因，我能够得到与他们相同的结果，但显然我在我的情况下遗漏了一些东西，因此我的问题。
如何在 css 网格单元上设置一个width: 100%的按钮，当其上的文本长度改变时宽度不会增加？
3 个解决方案
解决方案1
2 已采纳 2019-06-16 11:05:19
您将列定义为minmax(30px, auto) ，而auto是罪魁祸首。 基本上，您告诉浏览器自动计算列的宽度，但不要让它们全部相等。 然后内容将定义您面对的宽度。
您可以将auto替换为1fr以避免这种影响。 您还使用了5列，因此您也应该更正此问题：
document.getElementById("card-btn").onclick = function() {myFunction()}; function myFunction() { document.getElementById("card-btn").innerHTML = "A little bit longer text"; }
.grid-container { display: grid; grid-gap: 1em; grid-template-columns: repeat(5, minmax(30px, 1fr)); grid-template-rows: repeat(4, minmax(30px, auto)); grid-auto-rows: minmax(50px, auto); height: 100vh; grid-template-areas: "card1 card2 card3 . card4" "card5 card5 card5 card5 card5" "card6 . . . card7" "card8 card8 card8 card8 card8"; } .grid-container div { background-color: red; } #card1 { grid-area: card1; } #card-btn { width: 100%; } #card2 { grid-area: card2; } #card3 { grid-area: card3; } #card4 { grid-area: card4; } #card5 { grid-area: card5; } #card6 { grid-area: card6; } #card7 { grid-area: card7; } #card8 { grid-area: card8; }
<div class="grid-container"> <div id="card1"> <button type="button" id="card-btn"> Short text </button> </div> <div id="card2"> card2 </div> <div id="card3"> card3 </div> <div id="card4"> card4 </div> <div id="card5"> card5 </div> <div id="card6"> card6 </div> <div id="card7"> card7 </div> <div id="card8"> card8 </div> </div>
获取隐式计算示例的相关问题：在 CSS 网格中保持列之间的比率。 grid-column 是如何计算的？
解决方案2
-1 2019-11-11 09:19:38
请注意， css 已计算出您想要的大小及其1fr
1fr = 默认网格列的大小：
解决方案3
-2 2019-06-16 11:07:15
您可以使用 Display: block; 或位置：固定；
固定大小列的响应式网格
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.