1
我正在尝试制作一个在线游戏。我试图在Paper.io之后对登录屏幕建模。我做了用户名输入和播放按钮，但在用户名输入的css文件中指定的宽度和高度不起作用。它被指定为216 x 30，但是当我打开网站时，它不起作用。奇怪的是，当我将所有的代码放到这个论坛的代码片段中时，它运行良好，但是当我在自己的计算机上运行它时，它不起作用。这是我的第一个在线HTML5游戏，所以请不要吼我！ :(css宽度和高度不起作用
html,
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
border: none;
overflow: hidden;
padding: 0;
font-family: 'Luckiest Guy';
font-size: 22px;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
#game .ctx,
#ctx {
height: 100%;
width: 100%;
overflow: hidden;
position: fixed;
left: 0;
top: 0;
}
#pre_game {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #dff3f7;
}
#pre_game .dark,
#dark {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .8);
}
#pre_game .logo {
position: absolute;
top: 15px;
left: 50%;
width: 500px;
height: 160px;
margin-left: -250px;
background: url('/img/logo.png') center center no-repeat;
background-size: contain;
}
#pre_game .grow {
position: absolute;
left: 50%;
margin-left: -168px;
width: 336px;
top: 250px;
}
#pre_game .grow {
animation: leaves 2s ease-in-out infinite alternate;
-webkit-animation: leaves 2s ease-in-out infinite alternate;
}
#pre_game input,
#contact .button {
position: absolute;
left: 0px;
top: 0px;
padding: 15px 5px;
text-indent: 10px;
border: 0;
height: 30px;
width: 216px;
line-height: 30px;
font-size: 25px;
background: #ededd1;
border-bottom: 6px solid #a1a18d;
outline: none;
}
#contact .button {
text-indent: 0;
}
#pre_game .button,
#contact .button {
position: absolute;
right: 0px;
top: 2px;
padding: 15px 5px;
text-align: center;
cursor: pointer;
height: 30px;
width: 90px;
}
#pre_game .button,
#contact .button {
background: #eaec4b;
border-bottom: 6px solid #a1a130;
margin-top: -2px;
color: #888a34;
line-height: 32px;
font-size: 34px;
}
#pre_game .button:hover,
#contact .button:hover {
background: #fafc5b;
}
#pre_game .button:active,
#contact .button:active {
border: none;
border-bottom: 2px solid #a1a130;
border-top: 4px solid #333;
}
@keyframes leaves {
0% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
100% {
transform: scale(0.9);
-webkit-transform: scale(0.9);
}
}
@-webkit-keyframes leaves {
0% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
100% {
transform: scale(0.9);
-webkit-transform: scale(0.9);
}
}
#pre_game:before {
content: '';
box-shadow: inset 0 0 320px #80969e;
-webkit-box-shadow: inset 0 0 320px #80969e;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
input:not([type]),
input[type="email" i],
input[type="number" i],
input[type="password" i],
input[type="tel" i],
input[type="url" i],
input[type="text" i] {
padding: 1px 0px;
}
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
input,
textarea,
select,
button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em 0em 0em 0em;
font: 13.3333px Arial;
}
button,
meter,
progress {
-webkit-writing-mode: horizontal-tb;
}<link href='//fonts.googleapis.com/css?family=Luckiest Guy' rel='stylesheet'>
<div id="pre_game" style="display: block;">
<div class="dark"></div>
<div class="logo"></div>
<div class="grow">
<div class="username">
<input type="text" placeholder="Your Name" style="left: 0px;">
</div>
<div class="button play" style="right: 0px;" onclick="game_start()">PLAY</div>
</div>
</div>更新：我不认为我是在我上面的解释不够清晰的代码片段张贴是我希望它是，但是当我运行。在我自己的计算机上的EXACT相同的代码，并打开网站，它是不一样的。下面是一些屏幕截图显示我看到的内容： what I see in the website 下面的图片中的尺寸是错误的，他们应该是216 x 30而不是206 x 0. Wrong dimensions
答：老实说，我不知道为什么这个工作，但它做到了。我尝试了normalize.css，甚至添加了包含CSS Timber Hjellum的行，这只会让事情变得更糟。我意识到，我把两边填充的数字从原来的宽度和高度中减去，这些数字就成了元素的实际宽度和高度。我所做的只是添加10的宽度（5px填充左边和右边的总数为10），并添加了36到高度（15px填充顶部和底部是30，但是当我添加30时，它结束了说高度24，所以我再加6个）。反正谢谢你的帮助！
你为什么要定义两次#contact .button的高度和宽度？' –
花了10分钟玩paper.io :) –
@Andrei哈哈哈:) –