如何在文本区域上正确放置按钮?
How can I layer a button over a textarea correctly?
我正在构建一个聊天网站,我试图让“提交消息”按钮与文本区域对齐,但我 运行 遇到了一个奇怪的问题。按钮在其上方对齐,但是(我猜)因为文本区域是可调整大小的,所以按钮在某种程度上位于它的“后面”。
.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
来修复它,但我希望我的页面能够完全响应所有屏幕尺寸。我该如何解决这个问题?
谢谢
像这样尝试,按钮和文本区域最终出现在它们自己的宽度为 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>
只需重新排列您的标记,按钮就会放在文本区域上。无论如何,在输入之后添加按钮在语义上更正确。
请注意,我已经调整了位置样式以更好地适应您的布局。由于您正在减小文本区域的大小,因此您需要覆盖 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>
我正在构建一个聊天网站,我试图让“提交消息”按钮与文本区域对齐,但我 运行 遇到了一个奇怪的问题。按钮在其上方对齐,但是(我猜)因为文本区域是可调整大小的,所以按钮在某种程度上位于它的“后面”。
.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
来修复它,但我希望我的页面能够完全响应所有屏幕尺寸。我该如何解决这个问题?
谢谢
像这样尝试,按钮和文本区域最终出现在它们自己的宽度为 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>
只需重新排列您的标记,按钮就会放在文本区域上。无论如何,在输入之后添加按钮在语义上更正确。
请注意,我已经调整了位置样式以更好地适应您的布局。由于您正在减小文本区域的大小,因此您需要覆盖 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>