我正在设计联系表格，但无法正确对齐

Question

我正在尝试制作联系表格，但我的文本“电子邮件”将不会进入应该包含的行。

我也不知道如何将整个联系表单更靠近页面右侧对齐，您会看到我对align左标签的不良尝试。

<div class="content">
        <h1>Contact Us</h1>
            <div id="contact-align">
            <div id="envelope">
        <form action="" method="post">
            <label>Your Name</label>
                <input name="name" placeholder="Paul Farley" type="text"/>
            <label>Email</label>
                <input name="email" placeholder="yourname@gmail.com" type="text"/>
            <label>Contact Number</label>
                <input name="contact" placeholder="123456789" type="text"/>
            <label>Message</label>
                    <textarea cols="15" name="message" placeholder="Message" rows="5">
                    </textarea>
                <input id="submit" type="submit" value="Send Message">
        </form>
        </div>

CSS代码：

div#envelope {
    width: 52%;
    margin: 7px 10% 7px 5%;
    padding:5px 0;
    border: 2px solid gray;
    border-radius:5px;
    background-color: #E6E6E6;
}
form {
    width:70%;
    margin:3% 15%;
}
input[type=text] {
    margin-bottom: 10px;
    margin-top: 10px;
    width:75%;
    padding: 15px;
    border-radius:5px;
    border:1px solid #7ac9b7;
}
input[type=submit] {
    margin-bottom: 3px;
    width:100%;
    padding: 15px;
    border-radius:5px;
    border:1px solid #7ac9b7;
    background-color: #4180C5;
    color: aliceblue;
    font-size:15px;
    cursor:pointer;
}
#submit:hover {
    background-color: #34669E;
}
textarea {
    width:100%;
    padding: 1px;
    margin-top: 5px;
    border:1px solid #7ac9b7;
    border-radius:5px;
    margin-bottom: 15px;
    resize:none;
}
input[type=text]:focus, textarea:focus {
    border-color: #4697e4;
}
label {
    color: #000000;
    display: inline-block;
    float: left;
}
#contact-align {
    left:60%;
}

Answer 1

将表格放在一起时，我通常用标签包裹输入。 它可以使事情更轻松地融合在一起。

至于对齐，我删除了#contact-align因为它并不是真正需要的，所以我删除了float: left; 并display: inline-block; 从标签上将#envelope的边距#envelope为7px 60% 。

 #envelope { width: 52%; margin: 7px 60%; padding: 5px 0; border: 2px solid gray; border-radius: 5px; background-color: #E6E6E6; } form { width: 70%; margin: 3% 15%; } input[type=text] { margin-bottom: 10px; margin-top: 10px; width: 75%; padding: 15px; border-radius: 5px; border: 1px solid #7ac9b7; } input[type=submit] { margin-bottom: 3px; width: 100%; padding: 15px; border-radius: 5px; border: 1px solid #7ac9b7; background-color: #4180C5; color: aliceblue; font-size: 15px; cursor: pointer; } #submit:hover { background-color: #34669E; } textarea { width: 100%; padding: 1px; margin-top: 5px; border: 1px solid #7ac9b7; border-radius: 5px; margin-bottom: 15px; resize: none; } input[type=text]:focus, textarea:focus { border-color: #4697e4; } label { color: #000000; } 

 <div class="content"> <h1>Contact Us</h1> <div id="envelope"> <form action="" method="post"> <label>Your Name <input name="name" placeholder="Paul Farley" type="text" /> </label> <label>Email <input name="email" placeholder="yourname@gmail.com" type="text" /> </label> <label>Contact Number <input name="contact" placeholder="123456789" type="text" /> </label> <label>Message <textarea cols="15" name="message" placeholder="Message" rows="5"></textarea> </label> <input id="submit" type="submit" value="Send Message"> </form> </div> </div>