Question

今天我建立了我的网站的联系部分，但我试图浮动它，当浮动的输入它们不起作用时，它们不可点击。有没有理由不工作？

我在网上看到它可能是因为它低于另一个元素所以我放z-index: 999;但这也没有用。

我要做的是将名称和电子邮箱放在同一行，并在下面留言。

这是我的代码：

<? php
$errors = '';
$myemail = 'versionabstracts@gmail.com'; //<-----Put Your email address here.
if (empty($_POST['name']) ||
  empty($_POST['email']) ||
  empty($_POST['message'])) {
  $errors. = "\n Error: All fields are required";
}

$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];

if (!preg_match(
  "/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i",
  $email_address)) {
  $errors. = "\n Error: Invalid email address";
}

if (empty($errors)) {
  $to = $myemail;
  $email_subject = "Contact form submission: $name";
  $email_body = "You have received a new message. ".
  " Here are the details:\n Name: $name \n Email: $email_address \n Message \n $message";

  $headers = "From: $myemail\n";
  $headers. = "Reply-To: $email_address";

  mail($to, $email_subject, $email_body, $headers);
  //redirect to the 'thank you' page
  header('Location: index.html');
} ?>
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
  < head >
  < title > Error! < /title>
</head >

  < body >
  <!-- This page is displayed only if there is some error -->
  <? php
echo nl2br($errors); ?>


< /body>
</html >

/* Contact Form */

#contactbg {
  position: absolute;
  left: 0px;
  top: 1670px;
  width: 100%;
}
@media (min-width: 286px) {
  #contactbg {
    top: 1650px;
  }
}
@media (min-width: 290px) {
  #contactbg {
    top: 1570px;
  }
}
@media (min-width: 295px) {
  #contactbg {
    top: 1550px;
  }
}
@media (min-width: 340px) {
  #contactbg {
    top: 1530px;
  }
}
@media (min-width: 346px) {
  #contactbg {
    top: 1460px;
  }
}
@media (min-width: 358px) {
  #contactbg {
    top: 1470px;
  }
}
@media (min-width: 364px) {
  #contactbg {
    top: 1440px;
  }
}
@media (min-width: 388px) {
  #contactbg {
    top: 1370px;
  }
}
@media (min-width: 416px) {
  #contactbg {
    top: 1345px;
  }
}
@media (min-width: 450px) {
  #contactbg {
    top: 1350px;
  }
}
@media (min-width: 466px) {
  #contactbg {
    top: 1280px;
  }
}
@media (min-width: 485px) {
  #contactbg {
    top: 1260px;
  }
}
@media (min-width: 510px) {
  #contactbg {
    top: 1270px;
  }
}
@media (min-width: 540px) {
  #contactbg {
    top: 1280px;
  }
}
@media (min-width: 550px) {
  #contactbg {
    top: 1770px;
    padding-bottom: 300px;
  }
}
@media (min-width: 556px) {
  #contactbg {
    top: 1700px;
  }
}
@media (min-width: 566px) {
  #contactbg {
    top: 1630px;
  }
}
@media (min-width: 580px) {
  #contactbg {
    top: 1550px;
  }
}
@media (min-width: 624px) {
  #contactbg {
    top: 1530px;
  }
}
@media (min-width: 650px) {
  #contactbg {
    top: 1540px;
  }
}
@media (min-width: 671px) {
  #contactbg {
    top: 1520px;
  }
}
@media (min-width: 692px) {
  #contactbg {
    top: 1450px;
  }
}
@media (min-width: 775px) {
  #contactbg {
    top: 1350px;
  }
}
@media (min-width: 850px) {
  #contactbg {
    top: 1360px;
  }
}
@media (min-width: 917px) {
  #contactbg {
    top: 1340px;
  }
}
@media (min-width: 931px) {
  #contactbg {
    top: 1290px;
  }
}
@media (min-width: 1122px) {
  #contactbg {
    top: 1200px;
  }
}
@media (min-width: 550px) {
  #contactbg h4 {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  #name {
    float: left;
    position: relative;
    z-index: 999;
  }
  #email {
    float: right;
    position: relative;
    z-index: 1999;
  }
  #message,
  textarea {
    width: 80%;
  }
  #message {
    position: relative;
  }
  #submit {} .button-primary {
    position: relative;
  }
}
@media (min-width: 600px) {
  textarea {
    width: 75%;
  }
}
@media (min-width: 800px) {
  #name {
    position: relative;
    left: 100px;
  }
  #email {
    position: relative;
    right: 100px;
  }
  textarea {
    width: 60%;
  }
}
@media (min-width: 1000px) {
  #name {
    left: 150px;
  }
  #email {
    right: 150px;
  }
  textarea {
    width: 50%;
  }
}
#name,
#email,
#message {
  z-index: 10000;
}
#submit,
.button-primary {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
textarea {
  font-family: Raleway;
  font-size: 0.9em;
}

<div id="contactbg">
  <div class="container4">
    <div class="row">
      <div class="animated">
        <div class="twelve columns">
          <h4 id="contact">Get In Touch!</h4>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="twelve columns">
        <form method="POST" name="contactform" action="contact-form-handler.php">
          <div class="animated">
            <p id="name">
              <label for='name'>Your Name</label>
              <input type="text" name="name" placeholder="Name">
            </p>
          </div>
          <div class="animated">
            <p id="email">
              <label for='email'>Email</label>
              <input type="text" name="email" placeholder="Email">
            </p>
          </div>
          <div class="animated">
            <p id="message">
              <label for='message'>Message</label>
              <textarea name="message" placeholder="Message"></textarea>
            </p>
          </div>
          <div id="submit" class="animated">
            <input class="button-primary" type="submit" value="Submit">
          </div>
        </form>

        <script language="JavaScript">
          // Code for validating the form
           // Visit http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
           // for details
          var frmvalidator = new Validator("contactform");
          frmvalidator.addValidation("name", "req", "Please provide your name");
          frmvalidator.addValidation("email", "req", "Please provide your email");
          frmvalidator.addValidation("email", "email", "Please enter a valid email address");
        </script>
      </div>
    </div>
  </div>
</div>

Answer 1

在表单中，将一个类添加到所需输入的父div中，并使用display来设置这些div类的样式：inline-block

<div class="animated name">
    <p id="name">
        <label for='name'>Your Name</label>
        <input type="text" name="name" placeholder="Name">
   </p>
</div>
<div class="animated email">
    <p id="email">
        <label for='email'>Email</label>
        <input type="text" name="email" placeholder="Email">
    </p>
</div>

在CSS中：

.name, .email {
    display: inline-block;
}

Answer 2

<div id="contactbg">
  <div class="container4">
    <div class="row">
      <div class="animated_1">
        <div class="twelve columns">
          <h4 id="contact">Get In Touch!</h4>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="twelve columns">
        <form method="POST" name="contactform" action="contact-form-handler.php">
          <div class="animated">
            <p class="fl">
              <label for='name'>Name</label>
              <input type="text" name="name" placeholder="Name">
            </p>
          </div>
          <div class="animated">
            <p class="fl">
              <label for='email'>Email</label>
              <input type="text" name="email" placeholder="Email">
            </p>
          </div>
          <div class="animated">
            <p class="fl">
              <label for='message'>Message</label>
              <textarea name="message" placeholder="Message"></textarea>
            </p>
          </div>
          <div class="fd" class="animated">
            <input class="button-primary" type="submit" value="Submit">
          </div>
        </form>

CSS

label { 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #ECECEC;
    text-decoration: none;
    width: 100px;
    display: block;
}
input {
    width: 180px;
    height: 25px;
    color:#bababa;
    padding:5px;
    font-size: 12px;
    -moz-border-radius: 6px;
    margin-right: 15px;
}
.fd{

    width: 180px;
}
.fd, .fl{ 
    float: left; 
    margin-bottom:15px;
 }
.fd {
  width: 396px !important;
}

希望这没关系

Answer 3

所以我发现了我的问题，我将输入浮动到同一行，但是一个输入是width:100%;所以它覆盖了另一个，我只给了输入两个宽度为44％而且我很好！

不能浮动输入框？

3 个答案: