>source

아래는 내가 생성하는 contact-us 양식의 코드이며 두 번째 div 중 하나에 클래스 이름 contact-form 를주었습니다.  background : rgba (0, 0, 0, 0.8)를 사용하지만 배경색을 화면의 100 % 대신 다른 div의 내용에 맞게 맞추고 싶습니다.

margin-left : 50px 및 margin-right : 50px를 사용해 보았지만 조금만 이동하지만 원하는 결과를 얻지 못합니다.

codepen.io 링크

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>

  • 답변 # 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>
    
    

관련 자료

  • 이전 javascript - 각도기 웹 드라이버에서 텍스트 필드 값을 얻는 방법
  • 다음 git - gitignore가 Visual Studio에서 작동하지 않습니다