Question

我熟悉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>

P.S。我有结帐这个页面，但我找不到足够的答案。

Answer 1

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

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

样式<form>标记

1 个答案: