1

http://jsfiddle.net/Jg3FP/1/

これはさまざまなブラウザーで正しく整列しませんが、js フィドルでは正常に動作します。私はエキゾチックなことをしていません。なぜこのように動作し、どうすれば修正できますか?

ここに画像の説明を入力

ここに画像の説明を入力

<div id="diceDiv">
    <div id="dice1Div">#</div>
    <input type="checkbox"/>
    <div id="dice2Div">#</div>
    <input type="checkbox"/>
    <div id="dice3Div">#</div>
    <input type="checkbox" />
    <div id="dice4Div">#</div>
    <input type="checkbox"/>
    <div id="dice5Div">#</div>
    <input type="checkbox"/>
    <div id="dice6Div">#</div>
    <input type="checkbox"/>
    <br/>
    <input type="button" value="Roll" />
</div>
<div id="log"></div>
<div id="score"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $("div div").css("float", "left");
    $("div input").css("clear", "right");
</script>
4

2 に答える 2

1

HTML に問題があります。

フロートの概念について:right代わりにleftdiv のフロートを設定しているときに、フロートをクリアしています。

また、表示時に実行すると予想されるすべての jQuery 呼び出しを$(document).read()に移動する必要があります。

DIVは通常ブロック要素であり、すべてのオプションがその周りに 1 つの div を持つように HTML を変更する自由を取りました。このようにして、ブロックのフォーマットに「クリア」を行わせます。

また、チェックボックスにゼロ パディングとマージンを適用しました。必要に応じて変更できます。

HTML を参照してください (ローカルに保存して実行できます)。

<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
    $('#diceDiv INPUT').css({padding: '0px', margin: '0px'})
    });
</script>
</head>
<body>
<div id="diceDiv">
    <div>
    <span id="dice1Div">#</span><input type="checkbox"/>
    </div>
    <div>
    <span id="dice2Div">#</span><input type="checkbox"/>
    </div>
    <div>
    <span id="dice3Div">#</span><input type="checkbox" />
    </div>
    <div>
    <span id="dice4Div">#</span><input type="checkbox"/>
    </div>
    <div>
    <span id="dice5Div">#</span><input type="checkbox"/>
    </div>
    <div>
    <span id="dice6Div">#</span><input type="checkbox"/>
    </div>
    <br/>
    <input type="button" value="Roll" />
</div>
<div id="log"></div>
<div id="score"></div>
</body>
</html>
于 2013-04-02T18:10:43.480 に答える