CSS를 사용하여 양식에 요소 배치

Question

CSS를 사용하여 양식의 레이블과 입력을 정렬해야합니다.

Label1: ______ 
Labellll2: ______ 
Button 

그래서, 내 HTML 및 CSS 모습을 다음과 같이 결과는 다음과 같이 (나는이 간단한 기법은 분명하다 바랍니다)해야한다. 문제는 레이블이 입력의 맨 위에 배치되고 버튼이 맨 아래가 아닌 오른쪽에 있다는 것입니다.

<form width="200px" name="optform" method="post" action="#"> 
     <div class = "boxx"> 
      <label for="param1">Param1:</label> 
      <input type="text" class="input-text" value="5" size="11" maxlength="11" name="param1" id="param1"> 
      <label for="param2">Param1:</label> 
      <input type="text" class="input-text" value="5" size="11" maxlength="11" name="param2" id="param2"> 
     </div> 
     <div class="buttons"> 
      <a href="#"> 
        <img src="images/opt.png" alt=""/> Run 
      </a> 
     </div> 

는

div.boxx { 
    width: 500px; 
} 
div.boxx .input-text{ 
    border:1px solid #A9C7F5; 
    color: #00557F; 
    font: 12px Arial; 
    float:left; 
    width:66%; 
    margin:0 0 0.5em 0.25em; 
} 

div.boxx label{ 
    display:block; 
font: 13px Arial; 
color:#00557F; 
width:33%; 
float:left; 
text-align:left; 
padding-right: 8px; 
} 
.buttons a, .buttons button { 
    -moz-border-bottom-colors: none; 
    -moz-border-image: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    background-color: #DFF4FF; 
    border-color: #EEEEEE #DEDEDE #DEDEDE #EEEEEE; 
    border-style: solid; 
    border-width: 1px; 
    color: #565656; 
    cursor: pointer; 
    font-family: Verdana,arial,sans-serif; 
    font-size: 11px; 
    font-weight: bold; 
    line-height: 130%; 
    margin: 10px 10px 0 0; 
    padding: 4px 10px 3px 7px; 
    text-decoration: none; 
} 
.buttons button { 
    overflow: visible; 
    padding: 4px 10px 3px 7px; 
    width: auto; 
} 

Answer 1

라벨은

display:inline-block; 

할 필요가 있고 폭이 레이블 또는 입력 상자 중 하나의 너무 큽니다. 여백과 여백은 고려되지 않기 때문에 너비 백분율에 문제가 발생할 수 있습니다. 여기

업데이트 된 CSS

div.boxx { 
width: 500px; 
} 
div.boxx .input-text{ 
border:1px solid #A9C7F5; 
color: #00557F; 
font: 12px Arial;  
width:60%; 
margin:0 0 0.5em 0.25em; 
} 

div.boxx label{ 
display:block; 
font: 13px Arial; 
color:#00557F; 
width:33%; 
float:left; 
text-align:left; 
padding-right: 8px; 
} 
.buttons a, .buttons button { 
-moz-border-bottom-colors: none; 
-moz-border-image: none; 
-moz-border-left-colors: none; 
-moz-border-right-colors: none; 
-moz-border-top-colors: none; 
background-color: #DFF4FF; 
border-color: #EEEEEE #DEDEDE #DEDEDE #EEEEEE; 
border-style: solid; 
border-width: 1px; 
color: #565656; 
cursor: pointer; 
font-family: Verdana,arial,sans-serif; 
font-size: 11px; 
font-weight: bold; 
line-height: 130%; 
margin: 10px 10px 0 0; 
padding: 4px 10px 3px 7px; 
text-decoration: none; 
} 
.buttons button { 
overflow: visible; 
padding: 4px 10px 3px 7px; 
width: auto; 
} 

Answer 2

나는 현대 CSS 사람들이 테이블을 싫어 알고 있지만이 경우 (그리고 div의 많은 정렬 문제) 나는 좋은 작은 테이블을 recomment. 이 http://jsfiddle.net/mmyxD/

같은

<table> 
    <tr> 
    <td>Label1: </td><td><input type="text" /></td> 
    </tr><tr> 
    <td>Label2: </td><td><input type="text" /></td> 
    </tr><tr> 
    <td>Label3: </td><td><input type="text" /></td> 
    </tr> 
</table> 
<input type="button" /> 

Answer 3

시도 뭔가 모든 여백/패딩 이유가 있나요? 너비에 따라 요소가 새로운 선에 배치됩니다.

Answer 4

div 및 범위를 사용할 수도 있습니다. 이런 식으로 뭔가 :

<form action=""> 
    <div class="row"><span class="label">label1:</span><span class="formw"><input type="text" size="25"></span></div> 
    <div class="row"><span class="label">label2:</span><span class="formw"><input type="text" size="25"></span></div> 
    <div class="spacer">&nbsp;</div> 
</form> 

과 CSS :

div.row { 
    clear: both; 
    padding-top: 10px; 
    } 

div.row span.label { 
    float: left; 
    width: 33%; 
    text-align: left; 
    } 

div.row span.formw input{ 
width: 100%; 
} 

div.row span.formw { 
    float: right; 
    width: 66%; 
    text-align: left; 
    }