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

【问题标题】：How can I modify/adjust the size of a contact form?如何修改/调整联系表的大小？
【发布时间】：2021-02-13 02:20:59
【问题描述】：

我刚刚学会了创建一个联系表单以放置在我的网页上。我使用来自 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>

【问题讨论】：

好的开始。我的评论与解决您提出的问题没有直接关系，而是为您的整个设计未来提供了一些考虑因素。您应该研究如何使用 CSS Grid 来实现您的目标 - 尽早学习这些技术将帮助您解决您将来遇到的任何页面布局问题。
你要水平一半吗？
用截图更好地展示想要的结果

标签： html css contact-form

【解决方案1】：

我将<h3> 标记移动到.container div 并为.container 设置新样式并将.contaner 的样式赋予<form> 标记并...查看下面的sn-p 代码

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 {
  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>

【讨论】：

嗨。谢谢你的建议。我刚刚将 .container div 更改为 50% 并且它起作用了。

【解决方案2】：

你在寻找这样的东西吗？

我刚刚将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>

【讨论】：

不，他在寻找高度“只占我网页下部的一半。”
this "我一直在寻找调整容器大小的方法，使其仅填满下部的一半"
“下半部分”可以根据阅读方式的不同进行不同的解释。 - 谢谢你的澄清。
大家好。抱歉回复晚了。谢谢您的帮助。这确实是我应该改变的容器宽度。我为容器添加了 50% 的宽度值，整个消息框最终给出了网页一半的水平显示。
所以在编辑之前我的原始答案是正确的？ - 哈哈。很高兴能帮助到人。

【解决方案3】：

您好，如果您希望容器“仅填满我网页下部的一半” 您需要创建一个 html 标记，该标记具有像 div 这样的块的显示，并将其命名为您想要的任何类，例如，假设您这样称呼它：

<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% 的高度如果你运行这个 sn-p full size 你会明白我的意思

<!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;}
    
    
     .foo{
        width:100%;
        height:50vh;
        }
    
        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;
        }
        </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>

【讨论】：