样式化 <form> 标签答案

【问题标题】：Styling <form> tag样式化 <form> 标签
【发布时间】：2016-01-08 02:19:38
【问题描述】：

我对 HTML/CSS 很熟悉，但无论如何都不懂。

我在设置表单元素的样式时遇到了困难。

我想在我的表单周围添加填充但是每当我这样做时只填充顶部和左侧

另一个问题是，当我将窗口重新调整为非常小的尺寸时，表单标签似乎伸出了

我想知道这样做的正确方法是什么。

另外，如果您可以查看我的简单代码并告诉我是否有更好/更标准的方法来做我在这里尝试做的事情。

* {
  box-sizing: border-box;
  font-size: 15px;
  margin: 0;
}
body {
  padding: 5%;
}
section {
  height: 100%;
  float: left;
  position: relative;
}
div {} .left-section {
  width: 25%;
}
.right-section {
  width: 75%;
}
.body-left {
  background-color: #000000;
  height: 93%;
}
.body-right {
  background-color: #DCDCDC;
  height: 86%;
}
.header {
  background-color: #808080;
  height: 7%;
}
.footer {
  background-color: #808080;
  height: 7%;
  width: 100%;
  position: absolute;
  padding: 5px;
}
form {
  position: absolute;
  height: 100%;
  width: 100%;
  display: block;
}
input {
  background-color: #808080;
  border-style: solid;
  border-width: small;
  border-color: #555555;
  border-radius: 5px;
  position: absolute;
  padding: 10px;
  left: 0;
  height: 80%;
  width: 90%;
  top: 50%;
  transform: translateY(-50%);
}
button {
  background-color: #808080;
  border-style: solid;
  border-width: small;
  border-color: #555555;
  border-radius: 5px;
  height: 80%;
  width: 10%;
  position: absolute;
  color: #555555;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

<html>

<head>
  <title>whisper</title>

  <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
  <section id="left" class="left-section">
    <div id="header_left" class="header">
    </div>

    <div id="body_left" class="body-left">
      <ol id="users"></ol>
    </div>
  </section>

  <section id="right" class="right-section">
    <div id="header_right" class="header">
    </div>

    <div id="body_right" class="body-right">
      <ol id="messages"></ol>
    </div>

    <div id="footer" class="footer">
      <form id="form_id" action="#">
        <input id="user_input" />
        <button id="btn_id">send</button>
      </form>
    </div>

  </section>

</body>

</html>

附：我已签出此页面，但找不到足够的答案。

【问题讨论】：

看看这个：stackoverflow.com/questions/11614732/css-styling-of-form-tags
还有这个：webdesign.about.com/cs/forms/a/aaprettyforms.htm

标签： html css forms

【解决方案1】：

我不知道这是否有帮助，但我将 5 像素的填充从页脚类切换到了表单样式。

.footer {
  background-color: #808080;
  height: 7%;
  width: 100%;
  position: absolute;
}
form {
  position: absolute;
  height: 100%;
  width: 100%;
  display: block;
  padding: 5px;
}

【讨论】：