Question

我正在尝试制作联系表单，但我的文字＆＃34;电子邮件＆＃34;不会去它应该在的线。

我也不知道如何将整个联系表单对齐到靠近页面的右侧，你可以看到我对左对齐标记的不良尝试。

<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上的边距更改为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>

我正在设计一个联系表单，无法使其正确对齐

1 个答案: