title: Prevent checkbox line breaks
body: <p>I'm making a checkbox drawing program, where the user can draw pictures with checkboxes. I need to disable automatic line breaks on the checkboxes, because they go off the end of the line and mess the square up. For example, here is what happens if I try to draw an 100*100 square:</p>
  
  <p><img src="https://i.stack.imgur.com/3Dj0G.jpg" alt="enter image description here"></p>
  
  <p>Obviously, this is not what I want. How can I disable the automatic line break when the screen runs out of space so the horizontal scroll bar appears?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type = "text/css"&gt;
  .drawcheck
  {
  display:inline-block;
  vertical-align:top;
  }
  &lt;/style&gt;
  &lt;script type = "text/javascript"&gt;
  
  function drawBoxes()
  {
  var html = "";
  
  for(var i = 0;i&lt;100;i++)
  {
     for(var j = 0;j&lt;100;j++)
     {
         html += "&lt;input type = 'checkbox' class = 'drawcheck'&gt;";
     }
     html += "&lt;br /&gt;";
  }
  
  document.getElementById('drawarea').innerHTML = html;
  }
  
  function clearAll()
  {
  var w = document.getElementsByTagName('input'); 
  for(var i = 0; i &lt; w.length; i++){ 
  if(w[i].type=='checkbox'){ 
  w[i].checked = false; 
  }
  }
  } 
  &lt;/script&gt;
  &lt;title&gt;Checkbox drawer&lt;/title&gt;
  &lt;/head&gt;
  &lt;body onload = "drawBoxes()"&gt;
  &lt;div id = "controlbar" style = "height:100px;float:top;background-color:#FF0000;"&gt;&lt;input type = "button" onclick = "clearAll()" value = "Clear"/&gt;&lt;/div&gt;
  &lt;div id ="drawarea" style = "text-align:center"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>