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的值来设置按钮之间的空间。这两种布局都能够使按钮水平方向对半铺满,选择使用哪种取决于你的具体需求和布局上文。

相关推荐
&岁月不待人&5 分钟前
Kotlin by lazy和lateinit的使用及区别
android·开发语言·kotlin
StayInLove8 分钟前
G1垃圾回收器日志详解
java·开发语言
无尽的大道16 分钟前
Java字符串深度解析:String的实现、常量池与性能优化
java·开发语言·性能优化
爱吃生蚝的于勒19 分钟前
深入学习指针(5)!!!!!!!!!!!!!!!
c语言·开发语言·数据结构·学习·计算机网络·算法
binishuaio29 分钟前
Java 第11天 (git版本控制器基础用法)
java·开发语言·git
zz.YE31 分钟前
【Java SE】StringBuffer
java·开发语言
就是有点傻35 分钟前
WPF中的依赖属性
开发语言·wpf
洋24043 分钟前
C语言常用标准库函数
c语言·开发语言
进击的六角龙1 小时前
Python中处理Excel的基本概念(如工作簿、工作表等)
开发语言·python·excel
wrx繁星点点1 小时前
状态模式(State Pattern)详解
java·开发语言·ui·设计模式·状态模式