开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何让我的按钮停留在文本框的底部，每次我按下“添加”？

要让按钮停留在文本框的底部，并且每次按下“添加”时都能正确显示，你可以使用HTML和CSS来实现这个布局。以下是一个简单的示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button at Bottom</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <textarea id="textInput" placeholder="Type something here..."></textarea>
        <button id="addButton">添加</button>
    </div>
</body>
</html>

CSS (styles.css)

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

textarea {
    flex: 1;
    padding: 10px;
    margin-bottom: 10px;
}

button {
    width: 100%;
    padding: 10px;
}

解释

HTML结构：
- container 是一个包含文本框和按钮的容器。
- textarea 是用户输入文本的区域。
- button 是“添加”按钮。

CSS样式：
- body, html 设置高度为100%，确保整个页面高度被利用。
- .container 使用 display: flex 和 flex-direction: column 来创建一个垂直布局。
- textarea 使用 flex: 1 来占据剩余的空间，使其在容器中垂直居中。
- button 设置宽度为100%，并添加一些内边距，使其看起来更美观。

应用场景

这个布局适用于需要在文本框底部固定按钮的场景，例如聊天应用、笔记应用等。

可能遇到的问题及解决方法

按钮位置不正确：
- 确保 .container 的高度设置为 100vh，使其占据整个视口高度。
- 确保 textarea 使用 flex: 1 来占据剩余空间。

文本框内容过多导致按钮被遮挡：
- 可以使用JavaScript监听文本框的滚动事件，并在滚动时调整按钮的位置。

示例代码

你可以将上述HTML和CSS代码保存到相应的文件中，然后在浏览器中打开HTML文件查看效果。

希望这个解答能帮助你实现按钮停留在文本框底部的需求！

相关搜索:如何让我的文字输入消失后，我按下添加按钮？每次我按下按钮时，<input>中的Sum值如何让按钮在每次按下时显示不同的标签我如何让我的flexbox与我的布局一起工作，我的侧边栏仍然停留在底部我怎么才能回显我按下的按钮的名字？如何在启用isEditing的情况下让UITableViewCell停留在底部？当一个按钮被按下时，我如何让我的播放器连续移动？HTML/CSS如何让我的页脚卡在底部？如何让我的底部边框显示在右侧如何让我的游戏角色停留在画布中？每次在Kivy中按下此特定按钮时，我都需要更改我的随机数当我按下UI按钮时，如何让我的播放器跳转？(统一)materil-ui如何按下纸张区域底部的按钮 clicklistener:如何让我的鼠标监听器记录每次点击给定的按钮如何让程序等待Java中的按钮按下如何让我的滑块高度自动匹配屏幕底部？如何抓取首页按钮按下？我需要模拟它的功能如何让我的按钮出现在我的地图上？当我的鼠标点击被按下时，我找不到让我的一张图片停留在屏幕上的方法让一个按钮减去我按下的下一个按钮的值。斯威夫特

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

我的Js代码－按钮按下时判断是否选择了最后一行，给出提示

-- function onsub() { //生成新月的字符串 var nian=Number(document.all("ListBox1",0).value.substring...options(document.all("ListBox1",0).selectedIndex+1).text==newny) return confirm("您将要创建数据的月份...; } return confirm("您将要创建 " +newny+" 的数据，是否继续？"); } !-->

3.6K10 0

我是如何让公司后台管理系统焕然一新的（下）-封装组件

而很多人会说我的项目不大，并没有什么难点，或者说并不算难点，只能说是一些坑，只要google一下就能解决，实在不行请教我同事，这些问题并没有困扰我很久。...其实我也遇到过相同的情况，和面试官说如何通过搜索引擎解决这些坑的吧不太好，让面试官认为你只是一个API Caller，但是又没有什么值得一谈的项目难点我的建议是，如果没有什么可以深聊的技术难点，不妨在日常开发过程中...函数使得表头显示能够更加灵活配置项暴露一个函数能够让当前列的数据执行这个函数达到预处理的效果配置项中设置一个二维数组，能够让数据字段组合，达到数据显示在不同的行数的效果添加了操作图标添加了数据(...这里我又定义了每个组件通用的配置项,使得不需要每次都在组件的attrs中声明一些重复的属性,比如placeholder,clearable等通用配置项文件: ?...在表单组件中只需要声明一个api的props让页面组件传入就可以了 ? 随后给提交按钮绑定click事件，进行表单验证最后执行接口函数，传入Model这个数据对象即可 ?

2.1K1 0

我如何每次运行程序时，都会将数据添加到对应的keys中，而不是重新创建一个dict啊？

大家好，我是Python进阶者。...一、前言前几天在Python最强王者交流群【】问了一个Python项目实战的问题，问题如下：请问，我如何每次运行程序时，都会将数据添加到对应的keys中，而不是重新创建一个dict啊。...如果你也有类似这种Python相关的小问题，欢迎随时来交流群学习交流哦，有问必答！三、总结大家好，我是Python进阶者。...这篇文章主要盘点了一个Python项目实战的问题，文中针对该问题，给出了具体的解析和代码实现，帮助粉丝顺利解决了问题。...最后感谢粉丝【】提出的问题，感谢【东哥】给出的思路，感谢【莫生气】等人参与学习交流。

1081 0

Visual Studio 2008 每日提示(三十一)

#311、按Shift+F11跳出函数原文链接：You can press Shift+F11 to step out of a function 操作步骤：在调试状态，断点停留在一个函数的内部...那么“继续”的命令是什么呢？你会发现原来没有“调试.继续”这个命令，而只有“调试.启动”命令。在调试模式下提示只是被改名了（并没产生新的命令）。...#317、在控制台程序中用Ctrl+F5让控制台停留在打开的状态原文链接:If you do a Ctrl+F5 on a console application, the console stays...如果你按Ctrl+F5启动程序而不调试，在底部就会出现“按任意键继续”的消息。评论：作者对此颇有疑问，不太理解为什么在调试状态控制台会一闪而过，而看不到任何调试信息。这个问题确实让人有些费解。...评论：文本可视化工具是我用的最多的可视化工具了，看比较成的sql语句非常方便。

8977 0

iOS 9人机界面指南(四)：UI元素（下）- 腾讯ISUX

可以的话，让活动指示器的尺寸和颜色与它所在的背景协调。 4.3.2 添加联系人按钮添加联系人按钮让用户将现有联系人添加到文本框或者其它文字视图中。 ?...添加联系人按钮：展示联系人列表帮助用户将一个联系人添加到当前联系人按钮所在的视图中使用添加联系人按钮让用户在不需要使用键盘的情况下就可以方便地访问到联系人。...4.3.18文本框开关按钮展示了两个互斥的选项或状态。 ? API提示：想要了解如何在代码中定义文本框，以及在文本框中支持图片和按钮，可以参考UITextField....你可以自定义一个文本框，帮助用户更好地理解如何使用它。举个例子，你可以在文本框的左侧或者右侧加入自定义图形，或者加入系统按钮，如书签按钮等。...理想情况下，表意明确的警告文案和逻辑清晰的按钮文案已经足以让用户正确判断自己该按哪个按钮了。

13.2K3 0

chrome使用技巧（看了定不让你失望，不错）

写在前面之前有看过刘哇勇写的Chrome 控制台不完全指南,让我觉得瞬间对chrome的了解实在太浅了。...chrome在我心里就是神。我只是很用心的写一下这篇文章，希望这些使用技巧对大家有用。...这个功能位于元素标签的底部，点击“show drawer”按钮，就可看见Emulation --> Sensors. ?...当选择器开启时，如果你停留在页面，鼠标指针会变成一个放大镜，让你去选择像素精度的颜色。 ?...回到顶部可视化的DOM阴影 eb浏览器在构建如文本框、按钮和输入框一类元素时，其它基本元素的视图是隐藏的。

9371 0

【IOS开发基础系列】UIAlertController专题

下面的代码片段展示了如何初始化和显示一个带有“取消”和“好的”按钮的对话框视图。...还有当文本框内容改变时，调用alertViewShouldEnableOtherButton:方法可以让按钮动态地可用或者不可用。 ...-> Void in textField.placeholder = "密码" textField.secureTextEntry = true } 在“好的”按钮按下时...，我们让程序读取文本框中的值。 ... 如果上拉菜单中有“取消”按钮的话，那么它永远都会出现在菜单的底部，不管添加的次序是如何(就是这么任性)。

5343 0

excel常用操作大全

按ctrl+f快捷搜索~ 1.如何向现有单元格批量添加固定字符？...2.如何在文件下拉窗口底部设置最近运行的文件名数量？打开“工具”，选择“选项”，然后选择“常规”，并在“最近使用的文件列表”下的文件编号输入框中更改文件编号。...在EXCEL菜单中，单击文件-页面设置-工作表-打印标题；您可以通过按下折叠对话框的按钮并用鼠标划定范围，将标题设置在顶端或左端。这样，Excel会自动将您指定的部分添加为每页的页眉。...将它移动到您想要添加斜线，的开始位置，按住鼠标左键并将其拖动到结束位置，释放鼠标，将绘制斜线。此外，您可以使用“文本框”按钮轻松地在斜线的顶部和底部添加文本，但是文本周围有边框。...23.如何保护工作簿？如果您不想让其他人打开或修改您的工作簿，请尝试添加密码。

19.2K1 0

【SWT】常用代码及接口（一）

前言我找了许多资料，发现SWT的很少，但是工作的时候在Eclipse开发窗口化的时候会用到，它相对于Swing来说，外观要更好看一些，性能也好一些，Swing是集成在IDEAJ上的，我通过看SWT face...text=new Text(shell,SWT.NONE); text.setBounds(20, 15, 80, 25); 3：实例向用户信息文本框输入文本信息，单击“OK”按钮，输入的文本将显示在文本框中...单击“Cancel”按钮将清除文本内容。 文本框不能为空，否则单击“OK”按钮将弹出提示对话框。且对输入的文本长度作了限制，不能超过 8 个字符。...设置了提示信息，当鼠标停留在“文本框”、“按钮”时将出现提示信息。此方法既可以起到帮助功能又可以起到容错功能。...final Text text1 = new Text(shell, SWT.BORDER); text1.setBounds(90, 20, 80, 20); // 当光标停留在该文本框时将出现提示信息

1681 0

同事安利的这个IDEA的兄弟，真香！

之前习惯了 dbvisualizer 中的操作，dbvisualizer 中光标停留在当前 sql 上(sql 以分号结尾)，按下Ctrl+.快捷键会自动执行当前 sql，其实 DataGrip 也能设置...语句执行时默认是提示，改成 smallest statement 后，光标停留在当前语句时，按下 Ctrl+Enter 就会直接执行当前语句。语句的执行结果在底部显示 ?...修改数据添加行、删除行也很方便，上部的+、-按钮能直接添加行或删除选中的行，编辑列同样也很方便，双击要修改的列，输入修改后的值，鼠标在其他部分点击就完成修改了 ?...自动检测无法解析的对象如果表名、字段名不存在，datagrip 会自动提示，此时对着有问题的表名或字段名，按下 Alt+Enter，会自动提示是否创建表或添加字段 ?...权限定字段名对于查询使用表别名的，而字段中没有使用别名前缀的，datagrip 能自动添加前缀，鼠标停留在需要添加别名前缀的字段上，使用 Alt+Enter 快捷键 ?

4.3K1 0

发现一款好用到爆的数据库工具，被惊艳到了！

之前习惯了dbvisualizer中的操作，dbvisualizer中光标停留在当前sql上(sql以分号结尾)，按下Ctrl+.快捷键会自动执行当前sql，其实DataGrip也能设置，在setting...->Database-General中语句执行时默认是提示，改成smallest statement后，光标停留在当前语句时，按下Ctrl+Enter就会直接执行当前语句。...+Shift+左右箭头调整添加行、删除行也很方便，上部的+、-按钮能直接添加行或删除选中的行，编辑列同样也很方便，双击要修改的列，输入修改后的值，鼠标在其他部分点击就完成修改了有的时候我们要把某个字段置为...顶部可以填写表名、表注释，中间可以点击右侧绿色+号添加列，列类型type也是能自动补全，default右侧的消息框图标点击后能对列添加注释，旁边的几个tab可以设置索引及外键所有这些操作的DDL都会直接在底部显示...Alt+Enter，会自动提示是否创建表或添加字段 3、权限定字段名对于查询使用表别名的，而字段中没有使用别名前缀的，datagrip能自动添加前缀，鼠标停留在需要添加别名前缀的字段上，使用Alt+

9292 0

IDEA 的 DataGrip 太吊了

之前习惯了dbvisualizer中的操作，dbvisualizer中光标停留在当前sql上(sql以分号结尾)，按下Ctrl+.快捷键会自动执行当前sql，其实DataGrip也能设置，在setting...->Database-General中语句执行时默认是提示，改成smallest statement后，光标停留在当前语句时，按下Ctrl+Enter就会直接执行当前语句。...+Shift+左右箭头调整添加行、删除行也很方便，上部的+、-按钮能直接添加行或删除选中的行，编辑列同样也很方便，双击要修改的列，输入修改后的值，鼠标在其他部分点击就完成修改了有的时候我们要把某个字段置为...顶部可以填写表名、表注释，中间可以点击右侧绿色+号添加列，列类型type也是能自动补全，default右侧的消息框图标点击后能对列添加注释，旁边的几个tab可以设置索引及外键所有这些操作的DDL都会直接在底部显示...select 查询所有列，这是不好的习惯，datagrip能快速展开列，光标定位到后面，按下Alt+Enter快捷键 5、大写自动转换 sql使用大写形式是个好的习惯，如果使用了小写，可以将光标停留在需要转换的字段或表名上

3K3 0

DataGrip 保姆级教程！

之前习惯了dbvisualizer中的操作，dbvisualizer中光标停留在当前sql上(sql以分号结尾)，按下Ctrl+.快捷键会自动执行当前sql，其实DataGrip也能设置，在setting...->Database-General中语句执行时默认是提示，改成smallest statement后，光标停留在当前语句时，按下Ctrl+Enter就会直接执行当前语句。...+Shift+左右箭头调整添加行、删除行也很方便，上部的+、-按钮能直接添加行或删除选中的行，编辑列同样也很方便，双击要修改的列，输入修改后的值，鼠标在其他部分点击就完成修改了有的时候我们要把某个字段置为...顶部可以填写表名、表注释，中间可以点击右侧绿色+号添加列，列类型type也是能自动补全，default右侧的消息框图标点击后能对列添加注释，旁边的几个tab可以设置索引及外键所有这些操作的DDL都会直接在底部显示...select 查询所有列，这是不好的习惯，datagrip能快速展开列，光标定位到后面，按下Alt+Enter快捷键 12、大写自动转换 sql使用大写形式是个好的习惯，如果使用了小写，可以将光标停留在需要转换的字段或表名上

5.1K1 2

JetBrains出品，一款好用到爆的数据库工具，惊艳到了！！！

之前习惯了dbvisualizer中的操作，dbvisualizer中光标停留在当前sql上(sql以分号结尾)，按下Ctrl+.快捷键会自动执行当前sql，其实DataGrip也能设置，在setting...语句执行时默认是提示，改成smallest statement后，光标停留在当前语句时，按下Ctrl+Enter就会直接执行当前语句。语句的执行结果在底部显示 ?...添加行、删除行也很方便，上部的+、-按钮能直接添加行或删除选中的行，编辑列同样也很方便，双击要修改的列，输入修改后的值，鼠标在其他部分点击就完成修改了 ?...2、自动检测无法解析的对象如果表名、字段名不存在，datagrip会自动提示，此时对着有问题的表名或字段名，按下Alt+Enter，会自动提示是否创建表或添加字段 ?...3、权限定字段名对于查询使用表别名的，而字段中没有使用别名前缀的，datagrip能自动添加前缀，鼠标停留在需要添加别名前缀的字段上，使用Alt+Enter快捷键 ?

1.6K1 0

除了Navicat：正版 MySQL 客户端，真香！

之前习惯了dbvisualizer中的操作，dbvisualizer中光标停留在当前sql上(sql以分号结尾)，按下Ctrl+.快捷键会自动执行当前sql，其实DataGrip也能设置，在setting...->Database-General中语句执行时默认是提示，改成smallest statement后，光标停留在当前语句时，按下Ctrl+Enter就会直接执行当前语句。...+Shift+左右箭头调整添加行、删除行也很方便，上部的+、-按钮能直接添加行或删除选中的行，编辑列同样也很方便，双击要修改的列，输入修改后的值，鼠标在其他部分点击就完成修改了有的时候我们要把某个字段置为...顶部可以填写表名、表注释，中间可以点击右侧绿色+号添加列，列类型type也是能自动补全，default右侧的消息框图标点击后能对列添加注释，旁边的几个tab可以设置索引及外键所有这些操作的DDL都会直接在底部显示...Alt+Enter，会自动提示是否创建表或添加字段 3、权限定字段名对于查询使用表别名的，而字段中没有使用别名前缀的，datagrip能自动添加前缀，鼠标停留在需要添加别名前缀的字段上，使用Alt+

4.2K3 0

IDEA 官方数据库管理神器，比 Navicat 还香？

之前习惯了 dbvisualizer 中的操作，dbvisualizer 中光标停留在当前 sql 上(sql 以分号结尾)，按下Ctrl+.快捷键会自动执行当前 sql，其实 DataGrip 也能设置...，在 setting->Database-General中语句执行时默认是提示，改成 smallest statement 后，光标停留在当前语句时，按下 Ctrl+Enter 就会直接执行当前语句...+Shift+左右箭头调整修改数据添加行、删除行也很方便，上部的+、-按钮能直接添加行或删除选中的行，编辑列同样也很方便，双击要修改的列，输入修改后的值，鼠标在其他部分点击就完成修改了有的时候我们要把某个字段置为...DDL 都会直接在底部显示我就问你怕不怕表建完后，可以点击下图中的 table 图标，打开表查看视图可以查看表的数据，也能查看 DDL 语句数据库导出这些基本功能的设计、体验，已经惊艳到我了...能快速展开列，光标定位到后面，按下 Alt+Enter 快捷键大写自动转换 sql 使用大写形式是个好的习惯，如果使用了小写，可以将光标停留在需要转换的字段或表名上，使用 Ctrl+shift+U

2.4K1 0

1小时，不会代码的我如何完成网易云音乐大作业网页制作？（IVX 第2篇）

1_bit：是的，就像下面这样，选择相对定位，然后写上你的应用名就可以了。小媛：明白，我进去了。我想问一下，那个相对定位是什么意思？ 1_bit：相对定位其实就是指你的网页的元素如何进行定位。...小媛：哈哈哈，我感觉字体太大了，我就修改了一下字体大小为 18，还修改了文本。 1_bit：可以的，接下来你可以多复制几个文本框，并且修改他们的文本值。...小媛：已经在做了，但是我复制了 6个文本框，后面两个不显示了。 1_bit：那是因为这一行已经包裹不了那么多内容了，你需要怎么样才可以让这一行能够包裹住那么多内容呢？小媛：更改行宽？！...在这一栏中首先需要制作的是一个热门推荐的标题内容，在这个标题中首先是一个圆圈，这个圆圈我们可以使用一个按钮添加一个图片代替，之后是一个文本框，内容为热门推荐，接下来是多个文本框和分割线。...小媛：然后多复制几份，改一下头像就可以了。 1_bit：那底部内容呢？小媛：底部内容直接一个文本，复制进去就可以了。

1.9K3 0

【Python篇】PyQt5 超详细教程——由入门到精通（序篇）

2.2 基本的 PyQt5 窗口与布局 QWidget 与 QMainWindow 的区别 QWidget：是 PyQt5 中的所有控件（如按钮、标签、文本框等）的基类。...我们先在窗口中添加了一个标签，然后再添加了两个水平排列的按钮。按钮排列在水平布局中，水平布局本身又嵌入到了垂直布局中，形成了一种灵活的组合布局。...("点击我", self) # 设置按钮点击事件 button.clicked.connect(self.button_clicked) # 将按钮设置为窗口的中央控件...3.3 QLineEdit（单行文本框） QLineEdit 是一个单行文本框，用于让用户输入文本。你可以获取用户输入的文本并对其进行处理。...self.line_edit.returnPressed.connect(self.return_pressed)：连接用户按下“回车键”时的信号到 return_pressed 槽函数，获取输入文本并打印出来

1.9K2 0

交互设计中的“所见即所得”原则

了解了大致流程，我们来看一下两款竞品。产品A和B都提供了“智能填写”的功能，但是在交互设计上存在差异。产品A，当用户上传完图片才会出现“智能填写”按钮；产品B是全程展示“智能填写”按钮的。...我凑过去一看，发现她没有关闭购买保险的弹框。因为这个弹框没有盖住底部“确认打印”按钮，用户误以为还是可以点击的，导致无法正常完成取票流程。 ?...我曾经遇到过一个场景，公司上线了一款优惠券，用户点击“立即领取”按钮即可领取。但是有些用户会被风控判定为了风险等级过高，导致领取失败。对于这个报错文案，我们改了好几版，但是每次都会收到用户的投诉。...例如，还是寄件的场景，要填写发件人信息，我懒得重新填写一遍地址，正好看到输入框右边有一个附近地址的功能。我点了一下，没有反应，又点了几下才发现底部出现了一个“附近地址”的列表。...这里的交互触点是“附近地址”的文字链接，我的视线也是停留在附近，没有注意到下拉列表已经出现在底部。操作和反馈完全不在同一视觉区域。 2）形式就近形式就近，这里的形式特指反馈形式。

1.7K3 0

Fdog系列（四）：使用Qt框架模仿QQ实现登录界面，界面篇。

如果你给按钮添加了图标，但是是像关闭按钮那样后面有白色的话，可以选中按钮属性中的autoRaise，勾选一下，你就会发现背景透明了。...//鼠标释放并对其进行实现 void Login::mousePressEvent(QMouseEvent *event) { isPressedWidget = true; // 当前鼠标按下的即是...美化主界面，文本框的奇思妙想 ? 现在，我们着重对样式进行一个美化，让它从左边的图向右边靠拢。...下面是一个主要的点，文本框的奇思妙想。 ? 1.如何添加默认文本，文本框属性中找placeholderText设置即可。...3.如何实现右边下拉选项框，其实这里是一个文本框和一个combox下拉列表框组成的 ? 点击三角按钮，将选中的内容显示在文本框就可以了。

3.9K5 2

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭