Question

每当我尝试将<form>嵌入<div>内（使用css文件更改格式等）时，输入栏都不适合div，就像我试图获取的那样，我不能似乎无需硬编码我不需要的位置就可以更改它，因为将来我可能会更改该div的大小并且我不想弄乱输入字段等。

您可能会看到，该表单不在div的边界内，我希望它很好地适合它的底部，因此它就像一个聊天框。

这是我当前的HTML

#game-chat-div {
  width: 500px;
  height: 15em;
  border-style: double;
  margin: 5px;
  position: fixed;
  left: 0;
  bottom: 0;
}

#chat-form {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 2px;
}

<div id='game-chat-div'>
  <div id='game-chat-messages'>Hello</div>
  <form id='chat-form'>
    <input id='game-chat-input' type='text'>
  </form>
</div>

我真的很固执，如果有人可以帮助我，我会很乐意。

Answer 1

您可以通过在css下方添加

#game-chat-input {
  width: 100%;
  box-sizing: border-box;
}

，并根据代码段更新其他CSS。为此，您需要使该div相对于父级。这将获取父级宽度。

#game-chat-div {
  width: 500px;
  height: 15em;
  border-style: double;
  margin: 5px;
  position: relative;
  left: 0;
  bottom: 0;
}

#chat-form {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 2px;
  box-sizing: border-box;
}
#game-chat-input {
  width: 100%;
  box-sizing: border-box;
}

<body>
<div id='game-chat-div'>
  <div id='game-chat-messages'>Hello</div>
  <form id='chat-form'>
    <input id='game-chat-input' type='text'>
  </form>
</div>

Answer 2

#game-chat-div的位置必须为relative 并且#chat-form必须是absolute和left:0 , bottom: 0 , margin:0 auto

如果您无法理解这些说明，请让我为您提供示例。

Answer 3

您可以通过简单地将#chat表单的位置更改为绝对位置来实现此目的

 #chat-form {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 2px;
}

Answer 4

如果您按照以下方式更改代码，则可以实现此目标：

#game-chat-div {
  width: 500px;
  height: 15em;
  border-style: double;
  margin: 5px;
  position: relative;
  box-sizing: border-box;
}

#chat-form {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 2px;
}

.position-fixed {
  position: fixed;
  left: 0;
  bottom: 0;
}

<body>
  <div class="position-fixed">
    <div id='game-chat-div'>
      <div id='game-chat-messages'>Hello</div>
      <form id='chat-form'>
        <input id='game-chat-input' type='text'>
      </form>
    </div>
  </div>

Here是小提琴的链接。

所做的更改只是原始代码中的一些小更正。

将<form>嵌入<div>

4 个答案: