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哈哈哈:) –