css两个button并列

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS两个button并列是实现网页排版的常用技巧之一,可以让不同的按钮在同一行内展示。.button { display: inline-block; padding: 10px; backgrou

CSS两个button并列是实现网页排版的常用技巧之一,可以让不同的按钮在同一行内展示。

.button {
  display: inline-block;
  padding: 10px;
  background-color: #44c767;
  color: #FFF;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
}

.left-button {
  margin-right: 10px;
}

.right-button {
  margin-left: 10px;
} 

在这段代码中,我们定义了两个类名为.button的样式,用来设置按钮的基本样式,包括背景颜色、字体颜色、边框圆角等。我们使用display: inline-block让按钮可以并列显示,而不是默认一行一个。同时,在其中一个按钮上加上.left-button类名,在另一个按钮上加上.right-button类名,通过设置margin-left和margin-right来控制两个按钮之间的距离。

通过以上CSS代码的设置,我们便可以在HTML中实现两个button的并列。

<div class="button-container">
  <button class="button left-button">按钮1</button>
  <button class="button right-button">按钮2</button>
</div> 

在HTML中,我们定义了一个class名为button-container的容器,用来将两个button包裹。然后,分别定义了两个button,分别加上类名left-button和right-button,让其样式不同。这样,就可以在网页中实现两个button的并列展示。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两个button并列

粉丝

0

关注

0

收藏

0

已有0次打赏