從文本字段左上角顯示標籤

-1

我希望我的標籤顯示位於文本字段中，這裏是我準確要求他們的截圖http://s20.postimg.org/p8h11xrot/label_1.png。我真的不知道該怎麼做，我嘗試了text-align或float: left。從文本字段左上角顯示標籤

這是我的CSS文件：

body { 

} 

#container{ 
    background-color:#ccccff; 
    width:100%; 
    margin-left:auto; 
    margin-right:auto; 

} 
.content { 
    padding: 5px; 
    width:100%; 
    margin-left:auto; 
    margin-right:auto; 
    text-align:center; 
} 
label { 
    text-align: center; 

} 
article p{ 
    text-align:center;  
} 
header{ 
    width: auto; 
    height: 100px; 
    background-color: #ffffff; 
    background: url(image.png) center center no-repeat; 
    text-align:center; 
} 
footer{ 
    text-align:center; 
    background-color: #999999; 
}

的Index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Intes - Register</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width"> 
     <link rel="stylesheet" href="css/main.css"> 
    </head> 
    <body> 
     <header> Header Image </header> 
     <section id="container"> 
      <article><p>Lorem ipsum dolor sit amet, consectetur 
       adipiscing elit. Sed eget vehicula sapien. 
       Donec vitae quam id dolor pretium viverra. 
       Nulla viverra quam eget fringilla ultrices.</article> 

      <label>First Name</label> 
      <br /> 
      <div class="content"> 
      <input type="text" name="first_name" size="50"> 
      <br /> 
      </div> 
      <label>Last Name</label> 
      <br /> 
      <div class="content"> 
      <input type="text" name="last_name" size="50"> 
      <br /> 
      </div> 
      <label>E-mail Address</label> 
      <br /> 
      <div class="content"> 
      <input type="text" name="email_address" size="50"> 
      <br /> 
      </div> 
      <div class="content"> 
      <input type="submit" value="Register"> 
      </div> 
     </section> 
     <footer>copyright stuff</footer> 
    </body> 
</html>

來源

2014-03-03 FBC

你嘗試使用'的text-align：left'？ –

是的，我嘗試過，但他們出現在頁面的左側，而不是在文本字段的頂部 – FBC

有你需要弄清楚居中形式和獲得標籤，以顯示輸入上述所需的視覺效果。

#container{ 
    text-align: center; 
} 

/* FORMS */ 
#my_form { 
    display: inline-block; 
    text-align: left; 
    line-height: 1.5; 
} 
#my_form label { 
    display: block; 
} 
#my_form input { 
    margin: 0.25em 0 0.5em; 
}

http://fiddle.jshell.net/g4yzZ/13/
http://fiddle.jshell.net/g4yzZ/13/show

來源

2014-03-03 21:34:21 JohanVdR

thnx很多它幫助了我很多，我現在如何顯示右邊的按鈕。 – FBC

#my_form input [type =「submit」] { float：right; } - http://fiddle.jshell.net/3TFQE/2/show/ – JohanVdR

THNX我已經做到了，但你幫了我很多，thnx thnx thnx :) – FBC

浮法您.labels和input元素向左{浮動：左}和使用{明確：右}上標籤。

來源

2014-03-03 21:18:21 SaminOz

給標籤或容器一個寬度，然後使用text-align：left。它應該工作。

label { 
    width: 100px; 
    text-align: center; 
}

來源

2014-03-03 21:18:52 kylealonius

你可以用width做到這一點。

訣竅是將input和label標籤包裝在包裝盒中。你幾乎到了那裏，但你的代碼嵌套關閉。

完成之後，您可以將content類設置爲輸入寬度333px，並將其與中心對齊，然後text-align留下標籤，這些標籤現在與輸入齊平。

工作代碼是在這裏：http://jsfiddle.net/bronzehedwick/xpB3v/

和相關的CSS：

.content { 
    padding: 5px; 
    width:333px; 
    margin: 0 auto; 
} 
label { 
    text-align: left; 
    display: block; 
}

來源

2014-03-03 21:35:30 bronzehedwick

從文本字段左上角顯示標籤

回答

相關問題