체크 박스 줄 바꿈 방지

사용자가 확인란을 사용하여 그림을 그릴 수있는 확인란 그리기 프로그램을 만들고 있습니다. 체크 박스에 자동 줄 바꿈을 사용하지 않도록 설정해야합니다. 줄 끝에서 벗어나서 사각형을 뒤집어 놓기 때문입니다. 예를 들어, 여기에 내가 100 * 100 사각형을 그립니다하려고하면 어떻게되는지입니다 :체크 박스 줄 바꿈 방지

enter image description here

분명히, 이것은 내가 원하는 것이 아니다. 화면에 공간이 부족하여 가로 스크롤 막대가 나타나면 자동 줄 바꿈을 어떻게 비활성화 할 수 있습니까?

.drawcheck { 
    float:left; 
}

당신을 위해 폭을 설정 할 수 있습니다 : 당신이 대신 인라인 블록을 사용하는 수행 할 수 있습니다하는 디스플레이 블록 및 부동 왼쪽

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

출처

2013-08-22 imulsion

컨테이너에서 add css overflow-x : scroll; – Daniel

@Daniel 변경 사항 없음 :/ – imulsion

http://jsfiddle.net/L8eny/ 컨테이너의 너비를 정의하십시오. – Daniel

white-space: nowrap 컨테이너 요소에 있어야합니다.

출처

2013-08-22 20:55:04

이 방법의 예 : http://jsfiddle.net/vE5t7/ – showdev

감사합니다. 완벽한 솔루션입니다. – imulsion

입니다 : 여기

내 코드입니다 그러나 체크 박스는 올바른 위치에서 정리할 수 있도록합니다.

출처

2013-08-22 20:55:00

상자의 각 행이 얼마나 넓은 지 잘 모르는 경우 드로잉에 아무 것도 쓰지 않는 것이 매우 어려울 것입니다. 실제로 매우 일련의 행을 출력하고 매우 긴 행 하나를 출력하고 단어 감싸기를 수행하는 것보다는 각 행이 얼마나 넓은지를 아는 것이 매우 중요합니다. – meagar

또한 좋은 대답, 도움을 주셔서 감사합니다 :) – imulsion

플로트를 사용하는 경우 표시 유형을 차단하도록 설정할 이유가 없습니다. – cimmanon

체크 박스 줄 바꿈 방지

답변

관련 문제