내가 보여 어떻게 텍스트 상자는 수직

Question

나는 형태를 가지고

<form action="index.php" method="post"> 
    <p>From<input type="text" id="popupDatepicker" name="date1"></p> 
    <p>To<input type="text" id="popupDatepicker2" name="date2"></p> 
<input type="submit" name="submit" value="Submit" id="submit" /> 

내 CSS는이 같은 웹의 양식을 보여줍니다

input[type="text"], textarea, input[type="file"] { 
    background-color: green; 
    -webkit-box-shadow: inset 0 2px 3px rgba(0,0,0,0.2); 
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);} 

입니다 :

을

To 텍스트 상자가보다 약간 뒤쪽에 있습니다.텍스트 상자 CSS를 사용하여 두 텍스트 상자를 모두 표시하려고합니다. 도와주세요?

Answer 1

랩에게 label 태그의 이름과 라벨 요소,이 방법으로 몇 가지 고정 width을 지정하여 텍스트 상자는 수직 인라인 것 또한 텍스트 상자의 이름은 이해하고 멀리 더 나은 방법으로 액세스 할 수 있습니다 화면 판독기 또는 기타 이와 같은 장치가 관련되어 있기 때문입니다.

Demo

비록, 나는이 그렇게 달성하기 위해 현명한 방법이라고 생각하지 않습니다

form p label { 
    width: 80px; 
    display: inline-block; 
} 

은 일반적으로 요소는 우리가 사용자에게 정보를 텍스트 상자, 자신의 정보 목록하지만 아무것도 형성한다.

그래서 div 대신 p의 요소에 불과 ul 및 li 또는 아무것도를 사용하는 것이 훨씬 논리적 당신 때문에 당신이 어떤 이유로 *, 당신이 둥지를 할 수없는 별도의 ㄱ * 잠금 레벨 요소를 필요 일어난 경우 넣다 p 태그 내부에 의 유효하지 않은 태그이 있습니다.

Answer 2

당신이 <label> 대신 <p> 의 좋은 오래된 <br/>를 사용한다, 의미 적이

<p>To<input type="text" id="popupDatepicker2" name="date2" style=" 
    margin-left: 19px; 
"></p> 

Answer 3

이럴을 시도하고

<form action="index.php" method="post"> 
<label for='popupDatepicker'>From</label> 
<input type="text" id="popupDatepicker" name="date1" /><br/> 
<label for='popupDatepicker2'>To</label> 
<input type="text" id="popupDatepicker2" name="date2" /><br/> 
<input type="submit" name="submit" value="Submit" id="submit" /> 
</form> 

label{ 
display:inline-block; // by default label is inline, which won't take height and width 
width:100px; 
} 
input[type="text"], textarea, input[type="file"] { 
background-color: green; 
-webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2); 
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2); 
} 

확인이 JSFiddle

Answer 4

라벨에 대한 공통의 폭을 설정

우선 먼저 단락 대신 라벨 태그를 사용하고 이 같은 hould 사용 테이블 : (이 당신에게 최종 코드)

이

<form action="index.php" method="post"> 
    <table> 
      <tr><td><label>From</label></td><td><input type="text" id="popupDatepicker" name="date1"></td> 
      <tr><td><label>To</label></td><td><input type="text" id="popupDatepicker2" name="date2"></td> 
    </table> 
<input type="submit" name="submit" value="Submit" id="submit" />