이상한 CSS 마진 문제

Question

나는 다음과 같은 구조의 클라이언트에 의해 디자인 된 양식을 스타일링하고있어

:

<div class="formRow"> 
    <div class="fieldName"> 
     Email 
    </div> 
    <div class="fieldInput"> 
     <input .../> 
    </div> 
</div> 

형태의 폭은 500 픽셀이지만, fieldName에 div의 각각의 상단에 fieldInput div의 스택 옆에 나란히 앉아있는 대신 다른. 이는 Chrome 및 Firefox에서 fieldName div가 340px의 계산 된 오른쪽 여백을 가져 와서 양식의 전체 너비를 차지하기 때문입니다.

이 동작을 무시할 수 없습니다. 10px의 여백 권한을 입력해도 아무런 효과가 없습니다. 그리고 div의 너비를 하드 숫자 또는 백분율로 설정하면 이상한 오른쪽 여백이 아닌 안쪽 너비 만 변경됩니다.

나는 어떤 CSS 두통을 앓고 있습니까?

BTW, 여기에 CSS는 다음과 같습니다

.formRow{ 
    padding: 3px 0 3px 0; 
    position: relative; 
    height: auto; 
    width: 100%; 
} 

.fieldName{ 
     font-size: 12px; 
     margin-left: 10px; 
     margin-right: 10px; 
     width: 100px; 

} 

.fieldInput{ 
     width: 200px; 
} 

Answer 1

예제 코드에서주의해야 할 것은 DIV를 과도하게 사용한다는 것입니다. 동일한 코드는 다음과 같이 작성할 수 있습니다 : 더 나은

<div class="formRow"> 
    <label class="fieldName">Email</label> 
    <input class="fieldInput" .../> 
</div> 

또는 :

<style type="text/css"> 
    UL, UL LI 
    { 
     margin: 0px; 
     padding: 0px; 
    } 

    UL LI 
    { 
     list-style: none; 
    } 

.fieldName{ 
     font-size: 12px; 
     margin-left: 10px; 
     margin-right: 10px; 
     width: 100px; 

} 

.fieldInput{ 
     width: 200px; 
} 
</style> 

<ul> 
    <li><label class="fieldName">Email</label> 
     <input class="fieldInput" .../></li> 
    ... 
</ul> 

당신은 "이 부분은 태그의 의미 론적 의미를 위반하고 두 섹션 모두에 대한 DIV 태그를 사용하여 페이지의 다른 섹션과 구별됩니다. " 실제로하려고하는 것은 과 다르게 양식 label의 스타일을 지정하는 것입니다. 우리는 이미 그 태그를 설명하고 있습니다.

Answer 2

시도 것으로,

.fieldName {display: inline} 

또는

.fieldInput {display: inline} 

또는 둘 모두

Answer 3

은 각 요소에 display: inline;를 추가하는 경우 추가 동감 하리라. 그들과 나란히 앉아서 지내십시오. 기본적으로 block 요소로 렌더링되기 때문에 브라우저는 해당 요소를 자체 행에 배치합니다.

.fieldName{ 
    font-size: 12px; 
    margin-left: 10px; 
    margin-right: 10px; 
    width: 100px; 
    display: inline;  
} 

.fieldInput{ 
    width: 200px; 
    display: inline; 
}