W3CSS : 중심 입력 필드

Question

배경 : 지금

https://www.w3schools.com/w3css/w3css_input.asp, 내가 중심 어려움의 비트를 갖는 새로운 웹 사이트 &에 시작하고있다 : 필자는 &이 웹 사이트에서 내 지식을 얻을 W3CSS를 사용하여 몇 가지 작은 웹 사이트를 수행 입력 필드 (양식 doesnt 일은 아직, 나는 단지 그것을 옳게 보이게하려고 노력하고있다).

http://clubs.kwister.com/login

기본적으로, 당신은 이메일 주소를 묻는 두 가지 형태를 볼 수 있습니다. 첫 번째는 CENTERED이고 입력 필드는 50 % 너비입니다. 그러나 사람이 전자 메일 주소를 입력하는 실제 입력 필드는 왼쪽으로 플러시됩니다.

두 번째 형식은 가로 : 50 %를 찍었지만 화면의 전체 너비를 차지하는 입력 필드를 보았습니다.

실종 입력란이 실제로 보이도록하려면 누락되었습니다. &에는 실제 입력 필드가 가운데 놓여 있지만 너비는 40-50 %입니까?

나는 W3 웹 사이트에서 '너비'예제가없고 모든 입력 필드가 사용 가능한 너비의 100 %를 차지하는 것을 볼 수 있습니다.

내가

PS I는 W3-세 번째 클래스 (응답 섹션) 할 수있는 (내가 또는 공백을 채우기 위해 나중에 아무것도 추가하지 않을 수있다), 화면을 분할 양쪽에 공백을 원하십니까 그러나 3 분의 1로, 양식의 화면 너비의 3 분의 1 이상을 차지하고 싶습니다.

Answer 1

글쎄, 입력 필드를 중앙에 배치하는 쉬운 방법이 있습니다. position: relative; 및 left: 25%;을 설정하여 가운데에 배치 할 수있는 방법이 있거나 상위 양식에 text-align: center;을 설정할 수 있습니다. 네가 뭘하고 있는지에 달렸어. 개인적으로, 나는 상대적인 입장을 취하고 떠났습니다.

도움이 되길 바랍니다.

ps. 나는 사용하려고하지 않을 것이다 display: inline-block; 사용 display: block; float: left;

Answer 2

Ive는 인라인 블록을 사용하여 작동하는 해결책을 발견했다.

너비 : 50 %; 텍스트 정렬 : 가운데; 디스플레이 : 인라인 블록;

제 1 예제가 작동 중입니다. 나머지는 편집 해 드리겠습니다.