Question

下面是我正在创建的与我们联系的表单的代码，我给第二个div之一的类名称为contact-form，其背景为：rgba（0，0，0，0.8），但是我希望背景颜色居中并适合其他div的内容，而不是100％在屏幕上显示。

我尝试使用margin-left：50px和margin-right：50px，但它只移动了一点，但没有产生预期的结果。

body {
  background: linear-gradient(rgb(0, 0, 150, 0.5),rgb(0, 0, 0, 0.5)),url(https://backgroundcheckall.com/wp-content/uploads/2017/12/contact-background-image-8.jpg);
  background-size: cover;
  background-position: center;
  font-family: sans-serif;
}

.contact-title h2 {
  font-size: 16px;
  margin: 50px;
}

 .contact-title {
   margin-top: 100px;
   color: #fff;
   text-transform: uppercase;
   transition: all 4s ease-in-out;
 }

 .contact-form {
   background: rgba(0, 0, 0, 0.8);
   margin-left: 50px;
   margin-right: 50px;
   border-radius: 5px;
   text-align: center;
   opacity: 0.5;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
 }

 form {
   margin-top: 50px;
   transition: all 4s ease-in-out;
 }

 .form-control {
   width: 50%;
   background: transparent;
   border: none;
   outline: none;
   border-bottom: 1px solid grey;
   color: #fff!important;
   font-size: 18px;
   margin-bottom: 16px;
 }

 input {
   height: 45px;
 }

 form .submit {
   background: #ff5722;
   border-color: transparent;
   color: #fff;
   font-size: 20px;
   font-weight: bold;
   height: 50px;
   margin-top: 20px;
 }

 form .submit:hover {
   background-color: #f44336;
   cursor: pointer;
 }

.contact-menu {
  background-color: black;
  margin: 8px 8px 8px 8px;
  opacity: 0.8;
  overflow: hidden;
  height: 50px;
}

.contact-menu a {
  color: #f2f2f2;
  margin: 0px 0 0 0;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 17px;
}

.contact-menu a:hover {
  background-color: #ddd;
  color: #000;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="UX-Compatible" content="ie=edge">
    <title>BENDEVI-Contact </title>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>

    <div class="contact-menu">
      <a href="index.html">Home</a>
      <a href="#">Foreign</a>
      <a href="#">AFrica</a>
      <a href="#">Unity</a>
    </div>

    <div class="contact-title">
      <h2>Contact Us</h2>
    </div>

     <div class="contact-form">

       <form id="contact-form" action="" method="post">
         <input type="text" name="name" class="form-control" placeholder="Your Name" value="" required><br>

         <input type="email" name="email" class="form-control" placeholder="Your Email" value="" required><br>

         <input type="text" name="Subject" class="form-control" placeholder="Subject" value="" required><br>


         <textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea><br>

         <input type="submit" class="form-control submit" value="SEND MESSAGE">

       </form>
     </div>
  </body>
</html>

Answer 1

根据您的描述，您希望表单元素占屏幕的50％，但外部div不会比表单本身宽。

您需要以%为单位增加页边距，以减少表格宽度。在我的示例中为25％。并且在表单内部将表单元素的宽度设置为100％，因此它们将采用切除的外部元素的整个宽度。通过使用%，它将以每个屏幕宽度流动所需的结果。（使用边距的%来获得所需的结果）。

body {
  background: linear-gradient(rgb(0, 0, 150, 0.5), rgb(0, 0, 0, 0.5)), url(https://backgroundcheckall.com/wp-content/uploads/2017/12/contact-background-image-8.jpg);
  background-size: cover;
  background-position: center;
  font-family: sans-serif;
}

.contact-title h2 {
  font-size: 16px;
  margin: 50px;
}

.contact-title {
  margin-top: 100px;
  color: #fff;
  text-transform: uppercase;
  transition: all 4s ease-in-out;
}

.contact-form {
  background: rgba(0, 0, 0, 0.8);
  margin-left: 25%;
  margin-right: 25%;
  border-radius: 5px;
  text-align: center;
  opacity: 0.5;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
}

form {
  margin-top: 50px;
  padding: 5%;
  transition: all 4s ease-in-out;
}

.form-control {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 1px solid grey;
  color: #fff !important;
  font-size: 18px;
  margin-bottom: 16px;
}

input {
  height: 45px;
}

form .submit {
  background: #ff5722;
  border-color: transparent;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  height: 50px;
  margin-top: 20px;
}

form .submit:hover {
  background-color: #f44336;
  cursor: pointer;
}

.contact-menu {
  background-color: black;
  margin: 8px 8px 8px 8px;
  opacity: 0.8;
  overflow: hidden;
  height: 50px;
}

.contact-menu a {
  color: #f2f2f2;
  margin: 0px 0 0 0;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 17px;
}

.contact-menu a:hover {
  background-color: #ddd;
  color: #000;
}

<div class="contact-menu">
  <a href="index.html">Home</a>
  <a href="#">Foreign</a>
  <a href="#">AFrica</a>
  <a href="#">Unity</a>
</div>

<div class="contact-title">
  <h2>Contact Us</h2>
</div>

<div class="contact-form">

  <form id="contact-form" action="" method="post">
    <input type="text" name="name" class="form-control" placeholder="Your Name" value="" required><br>

    <input type="email" name="email" class="form-control" placeholder="Your Email" value="" required><br>

    <input type="text" name="Subject" class="form-control" placeholder="Subject" value="" required><br>


    <textarea name="message" class="form-control" placeholder="Message" rows="4" required></textarea><br>

    <input type="submit" class="form-control submit" value="SEND MESSAGE">

  </form>
</div>

如何居中显示适合Div内容的背景颜色

1 个答案: