如何在文本区域上正确放置按钮？

Question

我正在构建一个聊天网站，我试图让“提交消息”按钮与文本区域对齐，但我运行遇到了一个奇怪的问题。按钮在其上方对齐，但是（我猜）因为文本区域是可调整大小的，所以按钮在某种程度上位于它的“后面”。

.center {
  text-align: center;
}

#textarea {
  position: fixed;
  bottom: 10px;
  right: 10px;
  left: 10px;
}

#submit {
  position: fixed;
  bottom: 20px;
  right: 10px;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-1">
      </div>
      <div class="col-sm-10">
        <button type="submit" id="submit">Click to send!</button>
        <p class="center"><textarea name="main" placeholder="Write your message here!" id="textarea" cols="30" rows="5"></textarea></p>
      </div>
      <div class="col-sm-1">
      </div>
    </div>
  </div>
</body>

在代码片段中，尽量缩小文本区域；该按钮位于其最小化状态的正上方。我考虑通过简单地向按钮添加 margin-bottom 来修复它，但我希望我的页面能够完全响应所有屏幕尺寸。我该如何解决这个问题？

谢谢

Answer 1

像这样尝试，按钮和文本区域最终出现在它们自己的宽度为 col-10 的单独列中。 mx-auto 然后将列居中。

   <div class="row">
       <div class="col-sm-10 mx-auto">
            <button type="submit" id="submit">Click to send!</button>
       </div>
       <div class="col-sm-10 mx-auto">
            <p class="center"><textarea name="main" placeholder="Write your message here!" id="textarea" cols="30" rows="5" ></textarea></p>
            </div>            
        </div>
    </div>

Answer 2

只需重新排列您的标记，按钮就会放在文本区域上。无论如何，在输入之后添加按钮在语义上更正确。

请注意，我已经调整了位置样式以更好地适应您的布局。由于您正在减小文本区域的大小，因此您需要覆盖 Bootstrap 提供的宽度（假设您使用的是正确的表单元素类）。

提示：永远不要让您的用户点击某个地方。我们都知道如何使用按钮。只是没有必要。

.center {
  text-align: center;
}

#textarea {
  position: fixed;
  bottom: 10px;
  right: 10px;
  left: 10px;
  width: auto;
}

#submit {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-10">
        <p class="center"><textarea name="main" placeholder="Write your message here!" id="textarea" rows="5" class="form-control"></textarea></p>
        
        <button type="submit" id="submit" class="btn btn-default">Send!</button>
      </div>
    </div>
  </div>
</body>

如何在文本区域上正确放置按钮？

How can I layer a button over a textarea correctly?

html

css

twitter-bootstrap

textarea