JS两个按钮水平排列

要使两个按钮在水平方向上对半铺满,你可以使用CSS中的Flexbox布局或Grid布局。下面是使用Flexbox和Grid分别实现的示例代码:

Flexbox布局:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .button-container {
    display: flex;
  }
  .button-container button {
    flex: 1; /* 将每个按钮的flex grow值设置为1,这将使它们均等地填充容器 */
    margin: 5px; /* 为了视觉上的间隔,你可以调整这个值 */
  }
</style>
</head>
<body>
<div class="button-container">
  <button id="button1">Button 1</button>
  <button id="button2">Button 2</button>
</div>
</body>
</html>

在这个示例中,.button-container设置了display: flex;,这使得其子元素(即两个按钮)按照Flexbox布局方式进行排列。设置flex: 1;意味着每个按钮都有相同的柔性增长因子,会相同地填充父容器的空间。

Grid布局:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .button-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 为每个网格项分配1份可用空间 */
    gap: 10px; /* 如果需要按钮之间有间隙,可以设置gap的值 */
  }
</style>
</head>
<body>
<div class="button-container">
  <button id="button1">Button 1</button>
  <button id="button2">Button 2</button>
</div>
</body>
</html>

在这个示例中,.button-container设置了display: grid;,并且通过grid-template-columns: 1fr 1fr;来定义了两列,每列占用1份可用空间(fr 是一个可以根据容器空间比例分配的单位),从而让两个按钮各占据一半宽度。

在Flexbox和Grid布局中都可以通过调整margingap的值来设置按钮之间的空间。这两种布局都能够使按钮水平方向对半铺满,选择使用哪种取决于你的具体需求和布局上文。

相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
序属秋秋秋1 小时前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习
ruan1145142 小时前
MySQL4种隔离级别
java·开发语言·mysql
quant_19863 小时前
R语言如何接入实时行情接口
开发语言·经验分享·笔记·python·websocket·金融·r语言
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
百锦再7 小时前
详细解析 .NET 依赖注入的三种生命周期模式
java·开发语言·.net·di·注入·模式·依赖
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
失败又激情的man8 小时前
python之requests库解析
开发语言·爬虫·python
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
专注VB编程开发20年8 小时前
常见 HTTP 方法的成功状态码200,204,202,201
开发语言·网络协议·tcp/ip·http