首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我正在尝试将我的两个按钮放在我的样式div中,但我希望其中一个按钮在我拥有的表单中,另一个在提交表单之外

您可以使用以下方法将两个按钮放在样式div中,其中一个按钮在表单内,另一个按钮在提交表单之外:

  1. 首先,创建一个包含两个按钮的样式div,可以使用HTML和CSS来实现。例如:
代码语言:html
复制
<div class="button-container">
  <form>
    <button type="submit">提交</button>
  </form>
  <button>其他按钮</button>
</div>
  1. 在上述代码中,我们创建了一个名为"button-container"的样式div,并在其中放置了一个表单和两个按钮。其中,一个按钮位于表单内,另一个按钮位于表单之外。
  2. 接下来,您可以使用CSS来对样式div进行布局和样式设置。例如:
代码语言:css
复制
.button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 其他样式设置 */
}

上述CSS代码使用了flex布局,使得两个按钮水平排列,并且在样式div中居中对齐。您可以根据需要进行样式设置。

  1. 最后,您可以将上述HTML和CSS代码添加到您的网页中,并根据需要进行调整和修改。

这样,您就可以将两个按钮放在样式div中,其中一个按钮在表单内,另一个按钮在提交表单之外。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

那些你从不使用的 HTML 属性,背后竟然大有文章,赶快了来了解下

但是我确信我已经忘记了一大堆较少使用的属性,并且可能有一大堆我什至不知道存在的属性。这篇文章是我研究的结果,我希望你会发现其中的一些对你有用,因为你在接下来的几个月里构建 HTML 页面。...用户是否正在执行一系列操作?他们在提交信息吗?他们在保存设置吗?根据他们正在做什么,您可以自定义提示以匹配您的应用程序的需求。 您可以通过在移动设备上访问下面的 CodePen 演示来尝试这个。...然后尝试使用Toggle Reversed按钮反转列表。如您所见,除了有序列表的默认行为之外,还有很多可能性!...submit您可以使用此属性和表单的 id将表单控件(包括按钮)与文档中的任何表单相关联。 您可以使用此演示页面进行尝试。表单使用 GET 请求提交,因此您可以在 URL 的查询字符串中看到提交的值。...如果您使用过本文中提到的任何属性,或者如果您知道在您的项目中使用过的另一个 HTML 功能,请随时在评论中告诉我。

1.5K30

你不知道的HTML

但是我确信我已经忘记了一大堆较少使用的属性,并且可能有一大堆我甚至不知道其存在的属性。这篇文章是我研究的结果,我希望你会在接下来的几个月里构建 HTML 页面的时候,发现其中的一些对你有用。...用户是否正在执行一系列操作?他们在提交信息吗?他们在保存设置吗?根据他们正在做什么,您可以自定义提示以匹配您的应用程序的需求。 您可以通过在移动设备上访问下面的 CodePen 演示来尝试这个。...使用单选按钮选择该type属性的五个值之一。然后尝试使用Toggle Reversed按钮反转列表。如您所见,除了有序列表的默认行为之外,还有很多可能性!...submit您可以使用此属性和表单的id将表单控件(包括按钮)与文档中的任何表单相关联。 您可以使用此演示页面进行尝试。表单使用 GET 请求提交,因此您可以在 URL 的查询字符串中看到提交的值。...如果您使用过本文中提到的任何属性,或者您知道另一个 HTML 功能,亦或者您个人从在您的一个项目中使用而受益,请随时在评论中告诉我。 注:特别感谢技术指导dazhao(赵达)对本文翻译的审阅指正。

4.2K164
  • CSS通用类和“结构与样式分离”

    div> div> 这种方法也不会有重复的CSS,但现在是不是“结构与样式混合”了? 我们希望两个文本片段都使用.media-card做样式。...当我开始专注于创建可复用的类名时,我注意到一些事情: 组件做的事情越多,组件细节越多,越难以服用。 下面是一个直观的例子。 话说我们要建立一个表单,包括几个表单部分和一个在底部的提交按钮。.../button> div> 但也许在我们的网站中还有另外一个按钮,它并不是表单的一部分,但是却跟表单按钮看上去一样。...,而不是复制 那么如果我有两个地方用到.actions-list组件,一个需要左对齐,而另一个需要右对齐,那我们怎么用组合的方式来解决这个问题呢?...如果你看了一些时下流行的通用类框架,例如 Tachyons (一个非常棒的库),你会发现他们在纯粹的通用类之外,甚至创建了按钮的样式: <button class="f6 br3 ph3 pv2 white

    3.3K21

    【译】开始学习React - 概览和演示教程

    ,则所有的数据正在加载中。...这种特殊的方法是测试索引与数组中的所有索引,并返回除传递的索引之外的所有索引。 现在,我们必须将该函数传递给组件,并在每个可以调用该函数的字符旁边绘制一个按钮。...提交表单数据 现在,我们已经将数据存储在状态中,并且可以从状态中删除任何项目。但是,如果我们希望能够添加新数据来到状态呢?...在渲染中,让我们从state中获取两个属性,并将它们分配为正确的表单键对应的值。我们将把handleChange()作为输入的onChange运行,最后导出Form组件。...首先,我们要在package.json中添加一个homepage字段,其中包含我们希望应用程序继续存在的URL。

    11.2K20

    带你认识 flask 美化

    但是,回顾一下,我已经使用了extends子句来继承我的基础模板,这使我可以将页面的公共部分放在一个地方。 base.html模板定义了导航栏,其中包含几个链接,并且还导出了一个content块。...最后,在content块中,我定义了一个顶级容器,并在其中设定了呈现闪现消息的逻辑,这些消息现在将显示为Bootstrap警示的样式。...Flask-Bootstrap不需要逐个设置表单字段,而是使用一个接受Flask-WTF表单对象作为参数的宏,并以Bootstrap样式渲染出完整的表单。...再一次地,我不会向你展示我为应用中的其他表单所做的所有更改,但这些更改都是可以在GitHub上下载或检查到的。...为此,我再一次访问Bootstrap 文档,并修改了其中的一个示例。以下是在index.html页面中的分页链接的代码: app/templates/index.html: 重新设计后的分页链接。

    4.1K10

    按钮样式的正确方式

    按钮样式的正确方式 如果你正在建立一个网站或一个web应用,你可能会用到按钮,也许看起来像按钮的链接。不管怎样,让这些正常展示是很重要的。...在本教程中,我们将为和元素以及一个自定义.btn的CSS组件创建基本样式。 你会在这个过程的每一步中找到一个演示页面。...浏览器为“focus”和“active”(即按下)状态设置了默认样式,但通过重置按钮样式我们已经删除了其中的一些。 我们还希望为鼠标悬停设置样式,总体而言,我们希望可见的样式与我们的设计相匹配。...处理focus样式 还有一个棘手的问题。 在多个浏览器中,当您单击链接或按钮时,将应用两个伪类: :active :focus 一旦停止按下鼠标按钮或触控板,“active”伪类就会停止应用。...但在某些浏览器中,focus样式会一直保留,直到用户点击页面上的其他内容为止。 在我的测试中,受影响的浏览器包括Chrome(66),Edge(16)和Firefox(60,仅用于链接)。

    3.7K20

    ajax提交等待服务器响应友好提示信息的实现

    虽然,我不能改变客观环境因素带来的长响应时间,但我可以告诉用户系统正在做什么,让他们感受到,系统很在乎他们的感受,并愿意亲切地和他们交流的,而不是传统的软件那样,死板、霸道、冷冰冰的,好了,不多说大道理了...首先声明,我现在正在介绍的并不是一个多么强大,多么了不起,技术含量多么高、能领先人类文明多少年的做法,其实这种做法,在咸丰年代开始就有了,不过,那是别人的事,下面介绍的,是我自己一个字母一个字母敲的,旨在交流与分享...可以看到,表单中的提交按钮,并非一个传统意义上的的标签,而是一个,为什么用a?...我觉得用a控制起样式比较简单,最重要是它的hover属性能够兼容各浏览器,这样的话我想做点炫一点的效果简单很多而不用又去写些HACK来兼容该死的IE6们。...从表单的html可以看得到,在登录按钮的右侧有一个取回密码的链接,在等待登录响应过程中,这个链接的存在是没什么必要的,甚至在看起来是有点多余的,所以我决定将其替换成友好的等待信息,$("#forgetPwd

    2.5K30

    【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)

    标签/标签中只能放标签不能放其他标签,标签中只能放标签和标签。 标签中可以放其他标签。 列表带有自己的样式,可以使用CSS来修改。...分成两个部分: 表单域:包含表单元素的区域。重点是标签。 表单控件:输入框,提交按钮等。重点是标签。 1.3.1 -> form标签 提交"> 清空按钮必须放在标签中。...就是两个盒子,用于网页布局。 div>标签独占一行,是一个大盒子。 标签不独占一行,是一个小盒子。...3 -> HTML特殊字符 有些特殊的字符在html文件中是不能直接表示的,例如: 空格: ; 小于号:<; 大于号:>; 按位与:&; 标签就是用表示的。

    12210

    前端系列教学 - HTML基础

    # 前言 作为还在慢慢前端学习路上的一位自学者。我以写教程文章的方式来整理自己对于知识的理解,同时也希望能够把自己的理解作为一个分享。希望能够和大家共同进步,如有任何纰漏的话,希望大家多多指正。...如果在浏览器尝试上面的例子,你会发现三个水果只有一个可以被选中,点击另外一个,则之前选中的自动被取消。但是注意只有name属性相同的按钮在一起才会有这种效果。...在之后学了 JavaScript 我们可以为按钮绑定相应的事件。 提交按钮 submit & 重置按钮 reset: 提交 和 重置按钮 都可以被看成是具备特殊功能的普通按钮。...提交按钮点击后,可以将表单内容提交到服务器; 重置按钮点击后,可以重置当前表单内部的表单元素; #### 标签 前面我们看到的是按钮在标签中的实现。...参考示例图(点击查看),完成一个HTML页面代码编写(不需要关注样式,只关注文档结构)。这是我的代码,你可以作为一份参考 这是一个在线前端代码编辑网站。你可以即时看到代码在浏览器中的表现。 简单!

    7.2K110

    对话框、模态框和弹出框看起来很相似,它们有何不同?

    您可以在对话框中包含一个以 method="dialog" 提交的表单。该表单将在提交时关闭对话框。 例子 插入链接对话框,其背后为暗色背景。...,除了前两个,它们已展开并且旁边有隐藏按钮 图片类别中部分的显示/隐藏功能(显示在右侧)是一个披露小部件 特征 有许多不同的东西可以被视为披露组件。...它们共同点是它们由两个部分组成:一个是触发器元素,另一个是被触发的元素。 披露组件不会捕获焦点,没有背景,也不是模态的。它们通常使用触发器或特定的关闭按钮进行关闭或折叠。...如果存在表单,很可能是第一个表单字段。如果存在多个按钮,可能是其中最不破坏性的一个,例如如果有“取消”和“确认”按钮,一个合理的默认选项可能是“取消”。...相比之下,模态对话框并不具有 popover 所具有的特征。 一些例子: 国家选择器 您正在为在线商店构建结账表单。在一个字段中,用户需要选择一个国家。他们最终必须选择这个国家,因为它是必需的字段。

    4K00

    带你认识 flask web 表单

    顾名思义,密钥应该是隐密的,因为由它产生的令牌和签名的加密强度保证,取决于除了可信维护者之外,没有任何人能够获得它。 密钥被定义成由or运算符连接两个项的表达式。...事实上,我将会对所有的模板继承基础模板,以保持顶部导航栏风格统一。 这个模板需要一个form参数的传入到渲染模板的函数中,form来自于LoginForm类的实例化,不过我现在还没有编写它。...HTML元素被用作Web表单的容器。表单的action属性告诉浏览器在提交用户在表单中输入的信息时应该请求的URL。...如果你尝试过提交无效的数据,相信你会注意到,虽然验证机制查无遗漏,却没有给出表单错误的具体线索。下一个任务是通过在验证失败的每个字段旁边添加有意义的错误消息来改善用户体验。...如果你尝试在未填写username和password字段的情况下提交表单,就可以看到显眼的红色错误信息了。 ?

    2.3K20

    Web-第二天 HTML表单&CSS【悟空教程】

    第1章 网站用户注册页面显示 1.1 案例介绍 所有的html标签中,表单标签是最重要的。在实际开发中,最经典的实例就是用户注册,覆盖了表单标签的所有的元素。效果图如下: ?...如果数据需要提交到服务器,负责搜集数据的标签必须存放在表单标签体内容。 action属性:请求路径,确定表单提交到服务器的地址(路径) method属性:请求方式。...radio:单选框,表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的 。 submit:提交按钮。提交按钮会把表单数据发送到服务器。...一般不写name属性,否则将“提交”两个字提交到服务器。 因为不同项目注册需要的字段不同,需要完成的案例中没有覆盖所有的表单元素,以下标签使用也需要大家掌握。...3) 外部样式 外部样式又称为链入式,是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过标签将样式连接到HTML文档中。 <!

    4.3K40

    4、表单和高级选择器

    在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。 表单控件: 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。...表单域: 他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。...7、表单域 在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。...8、表单的高级应用 在表单内部添加disabled,即禁用该表单,或者禁用按钮 例子: 提交 应用场景:填写信息不完整,不同意服务选项等等,此时可以设置表单按钮不可用 readonly 只读 只能读...交集选择器 交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special。 记忆技巧: 交集选择器 是 并且的意思。

    7510

    React 支持 form action 是在作妖?不,它是一种重磅回归

    这是一个超强的特性。仔细看完你就能体会。 在 html 的基础知识中,表单是很重要的一个环节。...我们在表单中输入信息,并把信息记录展示在一个列表中。...5、它对服务端渲染的划时代意义 这里大家需要注意的一个小细节就是,许多针对表单功能增强的 API,都不是从 react 中引入,而是从 react-dom 中引入。 第一时间我还没想通这到底咋回事。...后来我才意识到,这对于服务端渲染有着巨大的划时代的重要意义。 在评估网页性能中,有一个重要的性能指标:TTI:可交互时间。页面加载完成,并且首屏显示,并且页面可以交互。...除此之外,React 在表单开发中还提供了许多功能增强的 hook,我们在后续的分享慢慢学习。

    35010

    爬虫系列:穿越网页表单与登录窗口进行采集

    当我们真正迈出网络数据采集基础之门的时候,遇到的第一个问题可能是:“我怎么获取登录窗口背后的信息呢?”今天,网络正在朝着页面交互、社交媒体、用户产生内容的趋势不断地演进。...提交一个基本表单 大多数网页表单都由一些 HTML 字段、一个提交按钮、一个在表单处理完成之后跳转的“执行结果”(表单 action 的值)页面构成。...除非你要对请求的设计样式进行研究,否则就不要花太多时间在表单所在的页面上。...,例如上面的 email 表单的 action 属性,也就是表单提交后网站会显示的页面 单选按钮、复选按钮和其他输入 显然,并非所有的页面都只是一堆文本字段和一个提交按钮。...而字段值有的时候比较复杂,有可能是在表单提交之前通过 Javascript 生成的。取色器就是一个比较奇怪的表单字段,他可能会用 #f5c26b 这样的值。

    84230

    AngularDart4.0 指南- 表单 顶

    使用ngSubmit处理表单提交。 禁用窗体的提交按钮,直到窗体有效。 建立 按照设置说明创建一个名为表单的新项目。...Name 控件具有HTML5必需属性; Alter Ego 控件什么也不做,因为alterEgo是可选的。 您在底部添加了一个提交按钮,其中有一些类用于样式。...你会看到一个样式化的表单! 使用* ngFor添加powers 英雄必须从一个固定的机构批准的权力列表中选择一个超级大国。 您在内部维护该列表(在HeroFormComponent中)。...如果没有Angular的帮助,你需要做什么才能将按钮的启用/禁用状态连接到表单的有效性? 对你来说,这很简单: 在(增强的)表单元素上定义一个模板引用变量。 在多处的按钮中引用该变量。...提交的标志变为真,表格消失。 您将看到表格中显示的英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交的标志。 当您单击编辑按钮时,该表消失,并且可编辑的表单重新出现。

    17.5K30
    领券