2013-02-05 3 views
0

CSS로 디자인하고있는 웹 사이트에서 양식 스타일을 지정하려고합니다. 레이블의 너비를 조정하려했지만 변경하지 않았습니다. #contact 라벨 { 폭 : 여기 CSS로 양식 스타일 지정

<h3>Contact Form</h3> 
<div> 
    <label for="form1_name">Name</label> 
    <input id="form1_name" name="name" type="text" required="required" /> 

</div> 

<div> 
    <label for="form1_email">Email</label> 
    <input id="form1_email" name="email" type="email" placeholder="[email protected]" required="required" /> 


</div> 

<div> 
    <label for="form1_email">Telephone</label> 
    <input id="form1_telephone" name="telephone" type="text" /> 
    </div> 


<div> 
    <label for="form1_message">Comment</label> 
    <textarea id="form1_message" name="message" cols="30" rows="4" required="required"></textarea> 

</div> 

<div> 
    <input id="form1_submit" name="submit" value="Send" type="submit" /><input type="hidden" name="cms-form" value="Y29udGFjdDpwZXJjaF9mb3JtczovdGVtcGxhdGVzL2NvbnRlbnQvY29udGFjdC5odG1s" /> 
</div> 


</form></div> 

내 CSS입니다 : 여기 내 코드 200 픽셀 중요한;! }

그러나 내 라벨의 너비는 변경되지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 다음 페이지로의 링크는 다음과 같습니다 http://ridgesideredangus.com/about.php

+2

코드에서 ID가 '연락처'인 요소가 표시되지 않습니다. 너? – PointedEars

+0

정확하거나 도움이되는 답변을 선택하십시오. – isherwood

답변

4
#contact label {display: inline-block; width: 200px;} 

레이블은 기본적으로 인라인 요소입니다. 차단 또는 인라인 차단하도록 설정하지 않으면 차원을 추가 할 수 없습니다.

0

다른 방법으로 divs을 도랑을 그립니다. 라벨 블록을 만들어 양식 요소를 중첩시킵니다. 레이블을 상대 위치로 설정하여 양식 요소를 상대적으로 배치 할 수 있습니다.

HTML

<label >Name<input id="form1_name" name="name" type="text" required="required" /></label> 

<label >Email<input id="form1_email" name="email" type="email" placeholder="[email protected]" required="required" /></label> 

<label >Telephone<input id="form1_telephone" name="telephone" type="text" /></label> 

CSS

label {display:block;position:relative;padding:5px;} 
label input {position:absolute; left:100px;} 

Example

그러나이some argue 명시,321 연관 것이 바람직 0에서 input

+0

이것은 접근하기 쉬운 접근 방법입니다. – isherwood