HTML 양식 필드 맞추기 - CSS로 변환

양식을 디자인하기 시작했습니다. 그리고 나에게 명백한 방법으로 해주었습니다. 그러나 이것은 잘못된 길처럼 보입니다. 나는 테이블을 사용해야한다고 생각하지 않지만, CSS는 :HTML 양식 필드 맞추기 - CSS로 변환

<form action="test.php"> 
    <table> 
     <tr> 
      <td>Name</td><td><input type="text" id="prjname" size="30"/></td> 
      <td align="right">Design type</td><td align="right"><select id="prjdesigntype"> 
       <option value="0" selected="selected">- Select one -</option> 
       </select></td> 
     </tr> 
     <tr> 
      <td>Description</td><td colspan="3"><input type="text" size="80" id="prjdesc" /></td> 
     </tr> 
    </table> 
</form>

누구든지 더 좋은 방법을 제안 할 수 있습니까? 특히, 위와 같은 설명 상자의 끝에 "선택"상자를 표시하는 것처럼보기 좋게하고 싶습니다.

DIV를 사용해 보았지만 한 줄의 텍스트 상자를 이전 줄의 텍스트 상자에 맞추는 방법을 알 수 없습니다.

출처

2012-12-13 Moose

달성하고자하는 레이아웃 이미지가 있습니까? –

https://www.google.com/search?q=css%20forms – Quentin

아마도 divs와 css를 사용하는 것이 좋을 것입니다. 아마도 요소를 더 잘 제어 할 수 있기 때문입니다. 이 코드를 사용해보십시오. 입력 된 태그가 긴 텍스트에 적합하지이며 늘 잘 보이기 때문에

<div style="width: 500px; height: auto; margin: auto;"> 
<form> 
<input type="text" name="prjname" id="prjname" size="30" placeholder="Enter your name .." style="float:left; clear:none; padding-left: 15px;"/> 
<select id="prjdesigntype"style="float: right; clear:none;" > 
    <option value="0" selected="selected">- Select one -</option> 
</select> 
<input type="text" size="80" id="prjdesc" placeholder="Enter the description .." style="float:left; clear:both; width: 500px; padding-left: 15px;"/> 

</form> 
</div>

출처

2012-12-13 14:14:13 Ankur

라벨이 누락되었지만 나머지 크기에 맞게 텍스트 상자 크기를 조정하는 방법을 알아낼 수는 없습니다.이를 100으로 설정하십시오. 남은 것은 무엇이든 완전히 새로운 라인을 사용합니다. – Moose

-1

당신이 주위에 당신의 머리를 일단 이것은

<form action="test.php"> 

    <div style="margin-bottom:5px;"> 
     <div style="float:right;"> 
      Design type 
      <select id="prjdesigntype"> 
       <option value="0" selected="selected"> 
        - Select one option 
       </option> 
      </select> 
     </div> 
     <div> 
      Name 
      <input type="text" id="prjname" size="30"/> 
     </div> 
    </div> 

    <div> 
     Description <input type="text" size="60" id="prjdesc" /> 
    </div> 

</form>

갈 줘 된 div 및 CSS 테이블 : 또한

,이 http://ux.stackexchange.com에 더 속할 수보다 훨씬 쉽게,하지만 경향 두 가지가 아닌 하나의 열에 모든 양식 요소를 포함하는 것이 유용하기 때문에 더 잘 수행 할 수 있습니다.

출처

2012-12-13 14:02:49 surfitscrollit

그것의 더 나은, 설명을위한 텍스트 영역 태그를 사용합니다.

출처

2012-12-13 15:37:56

HTML 양식 필드 맞추기 - CSS로 변환

답변

관련 문제