텍스트 필드의 오른쪽 정렬 레이블 위치에 대한 교차 브라우저 CSS

Question

내 UI에 rightToLeft 언어를 사용하고 있으므로 오른쪽에 텍스트 필드의 레이블이 있어야합니다. div로 float:right 라벨을 사용하고 div로 float:left 텍스트 필드를 사용해 보았습니다. 하지만 여전히 내 양식에 올바르게 정렬되지 않습니다.

이 코드 샘플입니다 :

<s:form action="processRegister" cssClass="form"> 
    <div style="float:right;text-align:right"> 
     <s:text name="label12.msg"/> 
    </div> 
    <div style="float:left"> 
     <s:textfield name="username" cssClass="textfield" /> 
    </div> 

    <div style="float:right;text-align:right"> 
     <s:text name="label13.msg"/> 
    </div> 
    <div style="float:left"> 
     <s:password id="password1" name="password" cssClass="textfield"/> 
    </div> 
</s:form> 

나는 테이블을 사용하고 다른 열에 하나의 열 및 라벨에 텍스트 필드를 넣어 시도 할 때, 그들은 한 줄에 정렬되지 않았다.

Answer 1

어떻게하면 제대로 정렬되지 않습니까? 일부 스크린 샷과 코드 예제를 보여줄 수 있습니까? 제대로 정렬되지 않은 각 입력란의 magin과 padding을 확인하고 싶습니까? 여백과 패딩을 0으로 설정하십시오.

실제로 다른 방법은 테이블을 사용하는 것입니다. 개별 셀 안에 패딩/여백이 0인지 확인하십시오. 그런 다음 셀의 정렬 속성을 사용하여 정렬 문제를 조정하십시오. 내가보기에 양식에 표를 사용하면 정렬 브라우저가 맞습니다.

Answer 2

이 jsfiddle은 원하는대로 처리합니다. 열쇠는 모든 입력/라벨 행이 고유 한 라인에서 끝나도록 플로트를 삭제하는 것입니다. 가능할 때마다 부동 소수점을 사용하여 요소의 너비를 지정할 때도 좋습니다. 이렇게하면 실수로 부유하는 것을 방지 할 수 있습니다.

또한 유용성을 위해 <label> 요소를 추가 했으므로 화면 판독기는 레이블이 적용되는 <input>을 알 수 있습니다.

HTML

<form> 
    <div> 
     <label for="username">Username</label>  
     <input type="text" id="username" name="username" size="20"/> 
    </div> 
    <div> 
     <label for="password">Password</label> 
     <input type="password" id="password" name="password" size="20"/> 
    </div> 
</form> 

CSS 당신은 스크린 샷을해야합니까

div { 
    clear: both; 
    width: 300px; 
} 

div label { 
    float: right; 
    text-align: right; 
} 

div input { 
    float: left; 
}