按钮位置像游戏控制器css,反应灵敏
Button position like game controller css, responsive
我想以类似于游戏控制器的方式放置这 4 个按钮。
我得到的结果如下。它们应该位于屏幕的中央底部,较小并且必须响应。我必须改变什么?我应该使用 #controls { position:relative;}
吗?
HTML代码:
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"/>...</head>
<body><div id="controls">
<button id="keyboard_key_up" class="movements_control"><img src="public/img/keyboard_key_up.png"/></button>
<button id="keyboard_key_left" class="movements_control"><img src="public/img/keyboard_key_left.png" /></button>
<button id="keyboard_key_down" class="movements_control"><img src="public/img/keyboard_key_down.png" /></button>
<button id="keyboard_key_right" class="movements_control"><img src="public/img/keyboard_key_right.png" /></button>
</div>...</body>
CSS代码:
#keyboard_key_up {
position: absolute;
right:300px;
bottom: 500px;
border-style: solid;
border-color: black;
background: white;z
}
#keyboard_key_left {
position: absolute;
right:575px;
bottom: 250px;
border-style: solid;
border-color: black;
}
#keyboard_key_down {
position: absolute;
right:300px;
bottom: 250px;
border-style: solid;
border-color: black;
}
#keyboard_key_right {
position: absolute;
right:25px;
bottom: 250px;
border-style: solid;
border-color: black;
}
试试这个 CSS:
#controls {
position: relative;
bottom: 10px;
margin: 0 auto;
}
如果这不起作用,能否请您使用 plunker 或 codepen 发送您的代码?
目前对 flex 和 grid 的支持应该很好,但根据您的目标,这可能无法正常工作。
body {
margin: 0;
padding: 0;
}
#wrapper {
display: flex;
height: 100vh;
justify-content: center;
}
#controls {
display: inline-grid;
grid-column-gap: 0;
align-self: end;
}
.movements_control {
border: solid 1px black;
margin: 0;
padding: 0;
}
.movements_control img {
width: inherit;
height: inherit;
}
#keyboard_key_up {
grid-column-start: 2;
}
#keyboard_key_left {
grid-column-start: 1;
}
#keyboard_key_down {}
#keyboard_key_right {
grid-column-start: 3;
}
@media (min-width: 721px) {
.movements_control {
width: 40px;
height: 40px;
}
}
@media (max-width: 720px) {
.movements_control {
width: 20px;
height: 20px;
}
}
<div id="wrapper">
<div id="controls">
<button id="keyboard_key_up" class="movements_control"><img src="public/img/keyboard_key_up.png"></button>
<button id="keyboard_key_left" class="movements_control"><img src="public/img/keyboard_key_left.png"></button>
<button id="keyboard_key_down" class="movements_control"><img src="public/img/keyboard_key_down.png"></button>
<button id="keyboard_key_right" class="movements_control"><img src="public/img/keyboard_key_right.png"></button>
</div>
</div>
我想以类似于游戏控制器的方式放置这 4 个按钮。
我得到的结果如下。它们应该位于屏幕的中央底部,较小并且必须响应。我必须改变什么?我应该使用 #controls { position:relative;}
吗?
HTML代码:
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"/>...</head>
<body><div id="controls">
<button id="keyboard_key_up" class="movements_control"><img src="public/img/keyboard_key_up.png"/></button>
<button id="keyboard_key_left" class="movements_control"><img src="public/img/keyboard_key_left.png" /></button>
<button id="keyboard_key_down" class="movements_control"><img src="public/img/keyboard_key_down.png" /></button>
<button id="keyboard_key_right" class="movements_control"><img src="public/img/keyboard_key_right.png" /></button>
</div>...</body>
CSS代码:
#keyboard_key_up {
position: absolute;
right:300px;
bottom: 500px;
border-style: solid;
border-color: black;
background: white;z
}
#keyboard_key_left {
position: absolute;
right:575px;
bottom: 250px;
border-style: solid;
border-color: black;
}
#keyboard_key_down {
position: absolute;
right:300px;
bottom: 250px;
border-style: solid;
border-color: black;
}
#keyboard_key_right {
position: absolute;
right:25px;
bottom: 250px;
border-style: solid;
border-color: black;
}
试试这个 CSS:
#controls {
position: relative;
bottom: 10px;
margin: 0 auto;
}
如果这不起作用,能否请您使用 plunker 或 codepen 发送您的代码?
目前对 flex 和 grid 的支持应该很好,但根据您的目标,这可能无法正常工作。
body {
margin: 0;
padding: 0;
}
#wrapper {
display: flex;
height: 100vh;
justify-content: center;
}
#controls {
display: inline-grid;
grid-column-gap: 0;
align-self: end;
}
.movements_control {
border: solid 1px black;
margin: 0;
padding: 0;
}
.movements_control img {
width: inherit;
height: inherit;
}
#keyboard_key_up {
grid-column-start: 2;
}
#keyboard_key_left {
grid-column-start: 1;
}
#keyboard_key_down {}
#keyboard_key_right {
grid-column-start: 3;
}
@media (min-width: 721px) {
.movements_control {
width: 40px;
height: 40px;
}
}
@media (max-width: 720px) {
.movements_control {
width: 20px;
height: 20px;
}
}
<div id="wrapper">
<div id="controls">
<button id="keyboard_key_up" class="movements_control"><img src="public/img/keyboard_key_up.png"></button>
<button id="keyboard_key_left" class="movements_control"><img src="public/img/keyboard_key_left.png"></button>
<button id="keyboard_key_down" class="movements_control"><img src="public/img/keyboard_key_down.png"></button>
<button id="keyboard_key_right" class="movements_control"><img src="public/img/keyboard_key_right.png"></button>
</div>
</div>