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的并列展示。
粉丝
0
关注
0
收藏
0