Javascript 防止复选框换行_Javascript_Html_Css_Checkbox

Javascript 防止复选框换行

javascript html css checkbox

Javascript 防止复选框换行,javascript,html,css,checkbox,Javascript,Html,Css,Checkbox,我正在制作一个复选框绘图程序，用户可以用复选框绘图。我需要禁用复选框上的自动换行，因为它们离开了行的末尾，把方块弄乱了。例如，如果我尝试绘制一个100*100的正方形，会发生以下情况：显然，这不是我想要的。当屏幕空间不足时，如何禁用自动换行，以显示水平滚动条这是我的密码： <!DOCTYPE html> <html> <head> <style type = "text/css"> .drawcheck { display:inline-blo

我正在制作一个复选框绘图程序，用户可以用复选框绘图。我需要禁用复选框上的自动换行，因为它们离开了行的末尾，把方块弄乱了。例如，如果我尝试绘制一个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>

您可能希望执行的操作（而不是使用内联块）是“显示块”和“左浮动”：

.drawcheck {
    float:left;
}

不过，您可能需要设置复选框的宽度，以便它们在右侧点清除。

您可能需要做的是显示块和向左浮动，而不是使用内联块：

.drawcheck {
    float:left;
}

不过，您可能必须为复选框设置宽度，以便它们在正确的位置清除。

空格：容器元素上的nowrap应该可以。

容器元素上的add css overflow-x:scroll；在容器上定义宽度。在容器上添加css overflow-x：滚动；定义容器的宽度。谢谢，完美的解决方案谢谢，完美的解决方案如果你不确定每行框的宽度，那么很难对图形进行任何处理。实际上，输出一系列行并了解每行的宽度非常重要，而不仅仅是输出一个非常长的行并让word wrap完成它的工作。如果使用float，没有理由将显示类型设置为block。对图形执行任何操作都会非常困难，如果你不确定每行盒子有多宽。实际上，输出一系列行，并知道每行的宽度，这一点非常重要，而不仅仅是输出一个非常长的行并让换行完成它的工作。如果使用float，没有理由将显示类型设置为block。