'prettifying'탭이 공백으로 변환되지 않도록하기

Question

최근에 브라우저 지원 정책을 IE 8/9, Firefox, Chrome & Windows 7의 Safari로 변경했습니다. 일부는 다른 형식으로 box-sizing: border-box;을 지원합니다 (일부는 접두사, 예를 들어 -moz-). 이렇게하면 폭 1em margin-right (레이블과 연관된 입력/선택 사이에 약간의 공간을 생성)을 가진 너비 21em의 레이블을 사용하여 너비 45em의 양식을 만든 다음 선택/텍스트 입력을 23em로 설정할 수 있습니다. 텍스트 영역은 45em이며 div를 텍스트 정렬과 함께 사용하여 버튼을 오른쪽에서 오른쪽으로 정렬합니다. 양식은 까지 완벽하게으로되어 있으며 브라우저 별 수정이 필요하지 않습니다!

그러나 어제 밤 새 프로젝트를 시작했을 때 문제가 발생했습니다. 이 기술을 사용했지만 작동시키지 못했습니다. 입력은 모두 다음 줄로 떨어졌습니다. 나는 마침내 문제의 근원이 무엇인지 알아 냈지만 그것을 고치는 방법을 찾을 수는 없다.

<div class="input-pair"> 
    <label for="mainBackgroundColor">Background Colour</label> 
    <input type="text" id="mainBackgroundColor" name="mainBackgroundColor" class="text color"> 
</div> 

그것은 캐리지 리턴 내가 읽기 쉽게 만들기 위해 사용하고 탭을 공백으로 변환되고 있음을 밝혀 : 이것은 내가 사용하고있는 마크 업입니다. 따라서 레이블과 입력의 실제 총 너비는 21em + 1em + 23em + 공백, 즉 45em + 공백이지만 컨테이너는 45em입니다. 행운을 빌어 CSS의 공백에 다른 값을 시도했습니다. 코드에 같은 줄에 레이블과 입력을 넣고 싶지는 않습니다. 읽기가 쉽지 않은 것처럼 보입니다. 누구든지이 새로운 라인과 탭을 멈추는 방법에 대해 생각을 가지고 있습니까?

Answer 1

여기에 대한 멋진 기사가 있습니다 : Fighting the Space Between Inline Block Elements.