1

ユーザーがチェックボックスで絵を描くことができるチェックボックス描画プログラムを作成しています。チェックボックスの自動改行を無効にする必要があります。これは、自動改行が行末から外れて正方形が台無しになるためです。たとえば、100*100 の正方形を描画しようとすると、次のようになります。

ここに画像の説明を入力

明らかに、これは私が望むものではありません。画面のスペースがなくなり、水平スクロール バーが表示されたときに、自動改行を無効にするにはどうすればよいですか?

これが私のコードです：

<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
.drawcheck
{
display:inline-block;
vertical-align:top;
}
</style>
<script type = "text/javascript">

function drawBoxes()
{
var html = "";

for(var i = 0;i<100;i++)
{
   for(var j = 0;j<100;j++)
   {
       html += "<input type = 'checkbox' class = 'drawcheck'>";
   }
   html += "<br />";
}

document.getElementById('drawarea').innerHTML = html;
}

function clearAll()
{
var w = document.getElementsByTagName('input'); 
for(var i = 0; i < w.length; i++){ 
if(w[i].type=='checkbox'){ 
w[i].checked = false; 
}
}
} 
</script>
<title>Checkbox drawer</title>
</head>
<body onload = "drawBoxes()">
<div id = "controlbar" style = "height:100px;float:top;background-color:#FF0000;"><input type = "button" onclick = "clearAll()" value = "Clear"/></div>
<div id ="drawarea" style = "text-align:center"></div>
</body>
</html>
4

2 に答える 2

7

white-space: nowrapコンテナ要素で行う必要があります。

于 2013-08-22T20:55:04.907 に答える
1

インライン ブロックを使用する代わりに、ディスプレイ ブロックとフローティング レフトを使用することをお勧めします。

.drawcheck {
    float:left;
}

ただし、チェックボックスが適切な場所でクリアされるように、チェックボックスの幅を設定する必要がある場合があります。

于 2013-08-22T20:55:00.517 に答える