Question

我目前正在编写我的第一个网站，到目前为止，一切进展顺利，直到我遇到障碍。我目前正在创建我想要整合到主页的联系表单。

我希望并排2x名称和2x电子邮件输入（当然两者之间有一点呼吸空间）和文本区域在两个框中的宽度相同。我也试图让发送按钮位于右侧的消息框下面。

另外，我无法在textarea上添加占位符。当我这样做时，文本看起来很有趣，而不像其他输入。如果有人可以帮助我，那将非常感激。

我尝试过很多东西，但似乎没有什么对我有用。我希望这里的某个人可能知道我没有尝试过的方法。

我在下面添加了我的代码，供大家查看，进一步了解我在说什么。

.section4 {
  background: whitesmoke;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-wrap {
  max-width: 75vw;
}

.form-text {
  font-family: Oswald;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.contact,
input,
textarea,
button {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: .5vh .5vw;
}

.contact-full {
  grid-column: 1/3;
}

.contact,
input,
textarea,
button {
  width: 100%;
  padding: 1.5vh;
}

button {
  font-family: Oswald;
  font-weight: 700;
  text-transform: uppercase;
  position: static;
  font-size: 2.5vh;
  background: transparent;
  border: 10px solid transparent;
  border-image: #c71d6f;
  border-image: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  border-image: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  border-image: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  border-image-slice: 1;
}

button:hover {
  color: #f4f4f4;
  background: #c71d6f;
  background: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  background: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  background: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Oswald:500,600,700" rel="stylesheet">
</head>

<body>
  <div class="section4">
    <form>
      <h2 class="form-text">let's work together!</h2>
      <div class="contact-wrap">
        <div class="contact">
          <input type="name" id="name" placeholder="Name" required>
          <input type="name" id="company" placeholder="Company">
          <input type="email" id="email" placeholder="Email" required>
          <input type="tel" id="telephone" placeholder="Contact">
          <textarea class="contact-full" name="message" rows="10"></textarea>
          <button class="button">Send</button>
        </div>
      </div>
    </form>
  </div>
</body>

</html>

Answer 1

使用grid-gap给出元素与grid-column之间的差距，以对齐元素left或right。请查看下面的代码段。

.section4 {
  background: whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-wrap {
  max-width: 75vw;
}

.form-text {
  font-family: Oswald;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.contact-full {
  grid-column: 1/3;
}

.contact,
input,
textarea,
button {
  padding: 1.5vh;
  margin: 0;
}

button {
  font-family: Oswald;
  font-weight: 700;
  text-transform: uppercase;
  position: static;
  font-size: 2.5vh;
  background: transparent;
  border: 10px solid transparent;
  border-image: #c71d6f;
  border-image: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  border-image: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  border-image: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  border-image-slice: 1;
  grid-column: 2;
}

button:hover {
  color: #f4f4f4;
  background: #c71d6f;
  background: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  background: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  background: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Oswald:500,600,700" rel="stylesheet">
</head>

<body>
  <div class="section4">
    <form>
      <h2 class="form-text">let's work together!</h2>
      <div class="contact-wrap">
        <div class="contact">
          <input type="name" id="name" placeholder="Name" required>
          <input type="name" id="company" placeholder="Company">
          <input type="email" id="email" placeholder="Email" required>
          <input type="tel" id="telephone" placeholder="Contact">
          <textarea class="contact-full" name="message" rows="10" placeholder="Message"></textarea>
          <button class="button">Send</button>
        </div>
      </div>
    </form>
  </div>
</body>

</html>

每行获得两个输入＆amp;修改提交宽度

1 个答案: