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

发布于 2025-01-16 08:28:15 字数 1473 浏览 3 评论 0原文

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

.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/[email protected]/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 添加到按钮来修复它，但我希望我的页面能够完全响应所有屏幕尺寸。我该如何解决这个问题？

谢谢

原文

I'm building a chatting website and I'm trying to make the "submit message" button to be aligned above the textarea, but I ran into a weird problem. The button is aligned above it, but ( I'm guessing ) because the textarea is resizable, the button is "behind" it in a way.

.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/[email protected]/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>

In the snippet, try to minimize the textarea as much as possible; The button is right above it's minimized state. I thought about fixing it by simply adding margin-bottom to the button but I want my page to be completely responsive for all screen sizes. How could I fix this?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深居我梦 2025-01-23 08:28:15

只需重新排序标记即可将按钮放置在文本区域上。无论如何，在输入之后添加按钮在语义上更正确。

请注意，我已经调整了位置样式以更好地适合您的布局。由于您要减小文本区域的大小，因此需要覆盖 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/[email protected]/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>

Simply by reordering your markup the button is laid over the textarea. It's more semantically correct to have the button after the input anyway.

Note that I've adjusted position styles to better fit your layout. Since you're reducing the size of the textarea you need to override the width that Bootstrap provides (assuming you're using proper form element classes).

Protip: Don't ever tell your users to click somewhere. We all know how to use buttons. It's just not necessary.

.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/[email protected]/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>

回复收藏 0 原文

无敌元气妹 2025-01-23 08:28:15

尝试这样，按钮和文本区域最终位于各自的单独列中，这些列的宽度为 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>

Try it like this, The button and the textarea end up in their own individual columns which are col-10 in width. mx-auto then centers the columns.

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

回复收藏 0 原文

~没有更多了~