做一些 HTML/CSS 编码作业,我想为我的按钮制作一个网格模板,以便它们位于相对的位置,就像在游戏中向上按钮在顶部,右键在右边等任何帮助表示赞赏。提前致谢。
#controller>.dpad {
display: grid;
grid-template-areas: " main right header footer ";
}
#controller>.dpad>button[env3d-key^="KEY_UP"] {
grid-area: header;
}
#controller>.dpad>button[env3d-key^="KEY_LEFT"] {
grid-area: main;
}
#controller>.dpad>button[env3d-key^="KEY_RIGHT"] {
grid-area: right;
}
#controller>.dpad>button[env3d-key^="KEY_DOWN"] {
grid-area: footer;
}
<div id="controller">
<div class="dpad">
<button env3d-key="KEY_UP">UP</button>
<button env3d-key="KEY_LEFT">LEFT</button>
<button env3d-key="KEY_RIGHT">RIGHT</button>
<button env3d-key="KEY_DOWN">DOWN</button>
</div>
<button env3d-key="KEY_A">A</button>
<button env3d-key="KEY_Z">Z</button>
</div>
最佳答案
#controller>.dpad {
display: grid;
grid-template-areas: ". header ."
"main . right"
". footer .";
}
#controller>.dpad>button[env3d-key^="KEY_UP"] {
grid-area: header;
}
#controller>.dpad>button[env3d-key^="KEY_LEFT"] {
grid-area: main;
}
#controller>.dpad>button[env3d-key^="KEY_RIGHT"] {
grid-area: right;
}
#controller>.dpad>button[env3d-key^="KEY_DOWN"] {
grid-area: footer;
}
<div id="controller">
<div class="dpad">
<button env3d-key="KEY_UP">UP</button>
<button env3d-key="KEY_LEFT">LEFT</button>
<button env3d-key="KEY_RIGHT">RIGHT</button>
<button env3d-key="KEY_DOWN">DOWN</button>
</div>
<button env3d-key="KEY_A">A</button>
<button env3d-key="KEY_Z">Z</button>
</div>
使用 .
空白区域。
关于HTML/CSS 如何使用 grid-template 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53375276/