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「コントロール」を持つdivが、その上のキャンバスに触れるようにするには、-5pxのマージントップが必要なのはなぜですか?

その 5 ピクセルを占めているのは何ですか?

3 つのボタンが隙間なく隣り合っているのを止めているのは何ですか?

4

4 に答える 4

1

「id "controls" を持つ div が、その上のキャンバスに触れるようにするために -5px の margin-top が必要なのはなぜですか?」

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>

float: left;または、ボタンセレクターに追加するなど、css スタイリングで修正を試みることもできます。

于 2013-08-10T13:52:55.920 に答える
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 に答える