html 表单 css 定位

我正在尝试制作一个 html 表单，我必须复制以下图像:

enter image description here

我几乎所有的事情都做对了，但我无法正确定位，尤其是在提交按钮上。最好的做法是什么？以及如何重新定位文本框旁边的“消息”标题？

<style type="text/css"> 
    form {
        background-color: gray;
        -moz-border-radius: 10px;
        border-radius: 10px;
        padding: 20px;
        width: 400px;
        text-align:right;
    }

    #formElements{
        width: 60%;
    }   
</style>


<body>
    <form>
        <div>
            Name: <input type="text" name="name" id="formElements">
            <p>
            Email: <input type="email" name="email" id="formElements">
            <p>
            Message: <textarea name="message" id="formElements"> </textarea>
            <p>
            <input type="submit" id="button" value="send your message">
        </div>
    </form>
</body>

最佳答案

这里有几个问题:

1。损坏的 HTML

您的 HTML 有几个地方损坏了。请记住始终关闭您的 <p>标签，并关闭 <input>带有软关闭的标签 />只是为了良好的实践。

2。切勿使用 ID 代替类

ID 只能分配给一个元素。他们要独一无二。如果要将一些 CSS 分配给多个元素，请使用类:

.class
//Not
#id

3。对表单中的文本使用标签

您不仅可以独立设置它们的样式，还可以使用 for属性将它们链接到您的输入。

4。修复 CSS

我使用了一些不同的 CSS 技巧，例如按钮的 block 式显示，以允许我将其放置在正确的位置。

form {
    background-color: gray;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 20px;
    width: 400px;
    text-align:right;
}
.formElements {
    width: 300px;
}
label {
    display: inline-block;
    vertical-align: top;
}
input[type="submit"] {
    display: block;
    margin-left: 95px;
}

5。修复 HTML

在这里。始终始终始终编写正确的 HTML。它会让你省去很多麻烦。

<form>
    <div>
        <label>Name:</label>
        <input type="text" name="name" class="formElements" />
        <p>
            <label>Email:</label>
            <input type="email" name="email" class="formElements" />
        </p>
        <p>
            <label>Message:</label>
            <textarea name="message" class="formElements" rows="4"></textarea>
        </p>
        <p>
            <input type="submit" id="button" value="send your message" />
        </p>
    </div>
</form>

这是一个JSFiddle该演示是适合您的表格。

希望对您有所帮助。

关于html 表单 css 定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27390755/