如何正確對齊輸入字段並左對齊標籤？

<html> 
<head> 
    <link rel="stylesheet" href="css/main.css"> 
    <meta charset="utf-8"> 
    <title> Contact page </title> 
</head> 
<body> 
<div id="wrapper"> 
     <header> 
      <nav> 
        <ul> 
        <li> <a href="index.html"> Index </a></li> 
        <li> <a href="learning_log.html"> Learning Log </a></li> 
        <li> <a href="contact.html"> Contact </a></li> 
       </ul> 
     </nav> 
    </header> 



<h1> Contact page </h1> 
<form> 
    <fieldset> 
     <legend>Contact Information</legend> 
    <p><label >first_name*: <input type="text" name="first_name*" required></label></p> 
    <p><label >last_name*: <input type="text" name="last_name*" required></label></p> 
    <p><label >phone_number*: <input type="number" name="number*" required></label></p>  
     </fieldset> 
     <fieldset> 
      <legend>Radio</legend> 
<label > contact_permission* </label><br> 
    <input type="radio" name="rating" required value="1 hour"> Yes <br/> 
<input type="radio" name="rating" value="2 hours"> No <br/> 
      </fieldset> 
     <fieldset> 
     <legend>Dropdown List</legend> 
     <label>best_time_to_contact*: </label> 
<select required> 
<option value="">Please Select</option> 
<option value="1"> Morning</option> 
<option value="2"> Afternoon</option> 
<option value="3"> Evening</option> 
</select> 
     </fieldset> 
     <fieldset> 
      <legend>Check box</legend> 
     <label > how_can_i_contact_you </label><br> 
<input type="checkbox" name="Phone" value="Phone"> Phone<br> 
<input type="checkbox" name="Email" value="Email"> Email <br> 
     </fieldset> 

    <br>  



     <input type="submit" name="Submit" value="Submit"> 
    </form> 
    </div> 
    </body> 
</html>

不太確定如何去解決這個問題，我試圖在樣式部分進行文本對齊：left和text-align：right，但是當我添加它時沒有發生變化。我不知道有任何其他的方式來做到這一點。 https://jsfiddle.net/tyvx60zc/這裏是我的外部CSS代碼jsfiddle。任何幫助將不勝感激如何正確對齊輸入字段並左對齊標籤？

來源

2016-03-10 hithere

誰是低選民的驅動力？這是一個公平的問題，儘管經常出現這個問題。可能是重複的。如果你打算倒戈，請說明原因。 – abalter

label { 
    display: block; 
    text-align: initial; 
} 
label>input { 
    float: right; 
}

來源

2016-03-10 04:39:19

注意：'initial' [沒有得到廣泛的支持。]（http://caniuse.com/#feat=css-initial-value） – abalter

只是用'text-align：left;':)替換它 –

但是他希望文本與輸入對齊。 – abalter

從包裝中取出text-align: center;，而是使用：

input { 
    display: inline-block; 
    position: relative; 
} 

label { 
    display: inline-block; 
    width: 200px; 
    text-align: right; 
}

https://jsfiddle.net/abalter/tyvx60zc/1/

FWIW，我也喜歡用<label for="...

來源

2016-03-10 04:58:39 abalter

添加以下CSS到您的CSS文件中：

p label{ 
width: 35%; 
display: inline-block; 
text-align: left; 
} 

p label input{ 
float: right; 
}

來源

2016-03-10 05:06:47 WisdmLabs

如何正確對齊輸入字段並左對齊標籤？

回答

相關問題