javascript - Prevent checkbox line breaks - Stack Overflow|江阴雨辰互联

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:

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?

Here is my code:

<!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>

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?

Here is my code:

<!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>

Share Improve this question asked Aug 22, 2013 at 20:51 imulsion 9,04820 gold badges58 silver badges85 bronze badges

On the container add css overflow-x: scroll; – Daniel Commented Aug 22, 2013 at 20:53
jsfiddle/L8eny Define a width on the container. – Daniel Commented Aug 22, 2013 at 20:59

Add a ment |

2 Answers 2

Sorted by: Reset to default 7

white-space: nowrap on the container element should do.

What you might want to do instead of using inline-blocks is display block and floating left:

.drawcheck {
    float:left;
}

You may have to set a width for the checkboxes, though, so that they will clear in the right spots.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744414577a4573051.html

javascript - Prevent checkbox line breaks - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Prevent checkbox line breaks - Stack Overflow

2 Answers 2

相关推荐