Question

我希望我的标签显示在文本字段中，这里是我想要的屏幕截图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>

Answer 1

将你的.labels和输入元素浮动到左边{float：left}并在标签上使用{clear：right}。

Answer 2

为标签或容器指定宽度，然后使用text-align：left。它应该工作。

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

Answer 3

要获得所需的视觉效果，您需要弄清楚表格的中心位置获取标签以显示输入上方。

#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

Answer 4

您可以使用width完成此操作。

诀窍是将input和label标记包装在包装器div中。你几乎到了那里，但代码中的嵌套已经关闭了。

完成后，您可以将content类设置为输入的宽度333px并将其与边距对齐，然后text-align离开标签，这些标签现在是齐平的与输入。

工作代码在这里：http://jsfiddle.net/bronzehedwick/xpB3v/

在文本字段中显示左上方的标签

4 个答案: