首页
学习
活动
专区
工具
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通用类和“结构与样式分离”

    这种方法也不会有重复CSS,但现在是不是“结构与样式混合”了? 我们希望两个文本片段都使用.media-card做样式。...当我开始专注于创建可复用类名时,注意到一些事情: 组件做事情越多,组件细节越多,越难以服用。 下面是一个直观例子。 话说我们要建立一个表单,包括几个表单部分和一个底部提交按钮。.../button> 但也许我们网站还有另外一个按钮,它并不是表单一部分,但是却跟表单按钮看上去一样。...,而不是复制 那么如果两个地方用到.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: 重新设计后分页链接。

    4K10

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

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

    2.5K30

    按钮样式正确方式

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

    3.6K20

    前端系列教学 - HTML基础

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

    7.1K110

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

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

    3.8K00

    带你认识 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.2K40

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

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

    83830

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

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

    20810

    AngularDart4.0 指南- 表单

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

    17.5K30

    HTML

    . 5·标签对一个标签是开始标签,第二个标签是结束标签. 6·一般成对出现标签,其内容两个标签中间,单独呈现标签,则在标签属性赋值,如标题,和元素而产生换行或者其他排版效果.这样显示效果称为“行内元素”(内联标签) :元素所包含内容,格式上有所变化,每一个元素所包含内容都另起一行,浏览器为它们分配了一个独立区域...):(表单用于向服务器传输数据) 用来创建一个表单,标签对之间表单控件都属于表单内容,表单可以说是一个容器. 1丶标签属性 ?  ...2、标签常用属性详解: action属性:    定义一个 URL。当点击提交按钮时,向这个 URL 发送数据。...method属性:  用于向 action URL 发送数据 HTTP 方法 method: 表单提交方式 post/get 默认取值 就是 get(信封) get: 1.提交键值对.放在地址栏

    2K20
    领券