與CSS

2013-02-05 57 views
0

樣式表單我想要的風格的網站,我用CSS設計上的一種形式。我試圖調整標籤的寬度並且不會改變它。這裏是我的代碼: 與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: #contact標籤{ 寬度:200像素重要;! }

然而,這並沒有改變我的標籤寬度。我究竟做錯了什麼?下面是該頁面的鏈接:http://ridgesideredangus.com/about.php

+2

我沒有看到你的代碼標識'contact'的元素。你做? – 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優選明確涉及的labelinput

+0

這是一種可訪問性的好方法。 – isherwood