如何修改/调整联系表格的大小？

编程问答 2022-06-05

问题描述

我刚刚学会了创建一个联系表单以放置在我的网页上。 我使用来自w3学校的html和css代码作为模板，并使用它来创建我的网页的联系表。 但是，当我在浏览器上检查它时，整个容器一直扩展到页面末尾。 我一直在寻找调整容器大小的方法，以使其仅占我网页下部的一半。 我希望对此有所投入。谢谢。

body {
  font-family: Arial,Helvetica,sans-serif;
}

* {
  Box-sizing: border-Box;
}

input[type=text],select,textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  Box-sizing: border-Box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
<body>

  <h3>Contact Form</h3>

  <div class="container">
    <form action="/action_page.PHP">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

      <label for="country">Country</label>
      <select id="country" name="country">
        <option value="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</option>
      </select>

      <label for="subject">Subject</label>
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

      <input type="submit" value="Submit">
    </form>
  </div>

</body>

解决方法

您是否正在寻找类似的东西？

我刚刚将width:50%添加到了您的容器类中。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {font-family: Arial,Helvetica,sans-serif;}
* {box-sizing: border-box;}

input[type=text],select,textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 50%;
}
</style>
</head>
<body>

<h3>Contact Form</h3>

<div class="container">
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

,

嗨，如果您希望容器“仅占我网页下部的一半” 您需要创建一个具有div之类的div标签的html标签，并将其命名为您想要的示例类，让我们这样称呼它：

<div class="foo"></div>
<div class="container">
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">
... ..
..
..

然后在CSS中，您可以像这样设置此标签的样式

.foo{
width:100%;
height:50vh;
}

“ vh”代表垂直高度 这表示曾经访问过此页面的人以及他们的屏幕尺寸是多少， 我希望这个div的高度为50％ 如果您以全尺寸运行此代码段，您会明白我的意思

<!DOCTYPE html>
        <html>
        <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <style>
        body {font-family: Arial,sans-serif;}
    
        * {box-sizing: border-box;}
    
    
     .foo{
        width:100%;
        height:50vh;
        }
    
        input[type=text],textarea {
          width: 100%;
          padding: 12px;
          border: 1px solid #ccc;
          border-radius: 4px;
          box-sizing: border-box;
          margin-top: 6px;
          margin-bottom: 16px;
          resize: vertical;
        }
    
        input[type=submit] {
          background-color: #4CAF50;
          color: white;
          padding: 12px 20px;
          border: none;
          border-radius: 4px;
          cursor: pointer;
        }
    
        input[type=submit]:hover {
          background-color: #45a049;
        }
    
        .container {
          border-radius: 5px;
          background-color: #f2f2f2;
          padding: 20px;
        }
        </style>
        </head>
<body>
    
        <h3>Contact Form</h3>
        <div class="foo"></div>
        <div class="container">
          <form action="/action_page.php">
            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="Your name..">
    
            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    
            <label for="country">Country</label>
            <select id="country" name="country">
              <option value="australia">Australia</option>
              <option value="canada">Canada</option>
              <option value="usa">USA</option>
            </select>
    
            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
    
            <input type="submit" value="Submit">
          </form>
        </div>
    
        </body>
        </html>

,

我将<h3>标记移至.container div并为.container设置了新样式，并将.contaner的样式赋给了<form>标记和。 。查看下面的代码段

body {
  font-family: Arial,sans-serif;
}

* {
  box-sizing: border-box;
}

input[type=text],textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container h3 {
  width: 320px;
}

form {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 320px;
}
<body>


  <div class="container">
    <h3>Contact Form</h3>
    <form action="/action_page.php">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

      <label for="country">Country</label>
      <select id="country" name="country">
        <option value="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</option>
      </select>

      <label for="subject">Subject</label>
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

      <input type="submit" value="Submit">
    </form>
  </div>

</body>

contact-formhtml