0

我创建了以下 jsFiddle 来演示我的问题（或者更像是缺乏理解）

http://jsfiddle.net/gRCS6/

和代码在这里

<div id="scoreboard"></div>
        <canvas id="game">
            Your browser does not support canvas.
        </canvas>
        <div id="controls">
            <button type="submit" id="newGame">New</button>
            <button type="submit" id="pause">Pause</button>
            <button type="submit" id="help">Help</button>
        </div>


#game {
    border: 1px solid #000000;
    background-color:#333333;
    width: 250px;
    margin:0px;    
}

#scoreboard {
    border: 1px solid #000000;
    background-color:#333333;
    color: orange;
    width: 250px;
    height: 40px;
    font:36px arial,sans-serif;
    text-align: right;;
}

#controls {
    margin-top: -5px;
    padding:0px;    
}

button {
    border: 1px solid #000000;
    margin-left:0px;

    background-color:#333333;
    color: orange;
    width:82px;
    height: 40px;
}

为什么 id 为“controls”的 div 需要 -5px 的 margin-top 才能使其接触到上面的画布？

什么占用了这 5 个像素？

是什么阻止了 3 个按钮彼此相邻且它们之间没有空间？

4

4 回答 4

1

canvas 元素默认是 display: inline （或者它是 inline-block ？），这意味着默认情况下底部有一个间隙，以便它与旁边任何文本的基线对齐。

您可以通过将画布设置为display: block或来更改此设置vertical-align: bottom。

按钮也有类似的问题，它们是 display: inline-block，这意味着它们之间有空格（因为单词之间有自然的空格）。如所选答案中所述，删除空格是一种选择，但更优雅的解决方案如下：

#controls {word-spacing: -2em; display: table; width: 100%;}

button {word-spacing:0;}
于 2013-08-10T13:46:42.753 回答
1

“为什么 id 为“控件”的 div 需要 -5px 的边距顶部才能使其接触到上面的画布？”

就像 ralph.m 指出的那样，可以通过添加来修复

canvas {
    display: block;  
}

“是什么阻止了 3 个按钮彼此相邻而没有空间？”

好吧，由于 html 代码中的按钮元素之间存在空格（字符“ ”），因此当页面显示时，您将在按钮之间看到这些空格。您可以删除空格：

<button type="submit" id="newGame">New</button><button type="submit" id="pause">Pause</button><button type="submit" id="help">Help</button>

代替

<button type="submit" id="newGame">New</button>
<button type="submit" id="pause">Pause</button>
<button type="submit" id="help">Help</button>

或者您可以尝试使用 css 样式修复它，例如通过添加float: left;到按钮选择器。

于 2013-08-10T13:52:55.920 回答
0

问题 1 的答案：检查此主题。不同的浏览器有不同的算法，所以你应该为body css添加一些额外的参数。

body
{
   margin: 0; 
   padding: 0;
}

Q2 的答案：避免使用关闭按钮选项卡。不是必须的，如果你去掉它，按钮之间的边距就会消失。http://jsfiddle.net/gRCS6/5/

<button type="submit" class="button">New
<button type="submit" class="button">Pause
<button type="submit" class="button">Help
于 2013-08-10T13:41:43.847 回答
0

解决此问题的另一种方法是使用绝对定位来定义控件 div 的确切位置。然后，您必须能够定义按钮的精确对齐方式，而不管显示如何： inline-block; 或显示：块；命令。

http://jsfiddle.net/gRCS6/34/

#game {
border: 1px solid #000000;
background-color:#333333;
width: 250px;
height: 120px;
margin:0px;
position: absolute;
}
#scoreboard {
border: 1px solid #000000;
background-color:#333333;
color: orange;
width: 250px;
height: 40px;
font:36px arial,sans-serif;
text-align: right;
}
#controls {
position: absolute;
top: 172px;
margin-top:  0px;
padding: 0px;    
}
button {
border: 1px solid #000000;
margin:0px;
background-color:#333333;
color: orange;
width:81.5px;
height: 40px;
}
于 2013-08-10T16:17:26.893 回答