CSS 양식 정렬

로그인 폼을 만들려고하지만 텍스트 필드와 제출 버튼이 제대로 정렬되지 않습니다. 현재 내 페이지는 텍스트 필드 아래 몇 픽셀 크기의 제출 버튼을 표시합니다.CSS 양식 정렬

이렇게 표시됩니다. [텍스트 필드] [텍스트 필드] [버튼]

사람이이 문제를 좀 도와 줄래, 내가 CSS를 새로운 오전

...

HTML :

<form name='loginform' id='loginform' action='logincheck.php' method='post' > 
<input type='text' name='user_login' id='user_login' class='login-header' value='Username'> 
<input type='password' name='user_pass' id='user_pass' class='login-header' value='password'><label style='color:#ffffff;'> 
<input type='submit' name='login' id='login' value='Log In' tabindex='100' class='login-button' > 
</form>

CSS :

.login-header { 
border : 1px solid Black; 
background-color : #CCCCCC; 
color : #0E1930; 
font-size : 12px; 
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
font-weight : bold; 
height: 2em; 
} 
.login-button { 
border : 1px solid Black; 
background-color : #CCCCCC; 
color : #0E1930; 
font-size : 12px; 
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
font-weight : bold; 
padding:4px 10px; 
}

출처

2012-01-10 Ersel Aker

그것은이다 (PS.는 IE9 변화는이 IE는. 크롬/사파리 (웹킷) 변화는 CSS에서, 내가 거기에 그것을 확인했습니다된다. 조건부 경우 사용하여 HTML 지역에 있습니다) 그것은 다음과 같아야합니다 : http://jsfiddle.net/jrm2k6/aAvtd/ CSS에 다른 것을 가지고 있지 않습니까? –

나는 그가 IE에서 어떻게 보이는지 언급하고 있다고 생각한다. – j08691

''은 어디에 있습니까? – veritas

이것은 내가 생각했던 것보다 힘들게 끝났습니다. 나는 그럭저럭 한 쌍의 CSS 변화와 추가 후 같은 것을보고있는 IE와 파이어 폭스를 얻을 수 있었다. 먼저 입력 크기에 em과 px를 모두 사용합니다. 대신 height: 2em; 스타일을 padding: 4px 0;으로 변경했습니다. 가장 어려운 부분은 파이어 폭스가 텍스트 입력보다 제출 입력에 대해 더 큰 안쪽 여백을 갖는 이유를 파악하는 것이 었습니다. 다음을 추가하여이 문제를 해결했습니다.

input::-moz-focus-inner 
{ 
    border: 0; 
    padding: 0; 
}

이제는 동일하게 보입니다. 여기에 예제를 설정했습니다 : http://jsfiddle.net/GhFvB/

출처

2012-01-10 22:10:00

display:inline;을 사용해 보셨습니까?

출처

2012-01-10 21:23:06 henryaaron

Chrome/Safari & IE9에 대한 수정 사항이 포함 된 jsfiddle을 만들었습니다. 그것은

http://jsfiddle.net/2gEK3/6/

는 희망이 도움이 내 파이어 폭스 (V7.0.1)에 대한 벌금을 표현했다. :)

출처

2012-01-10 22:15:03 Jassi

CSS 양식 정렬

답변

관련 문제