在网页设计中,按钮的设计是必不可少的。而如何将两个按钮并列显示是一个常见的问题。这里我们可以使用 CSS 来实现。下面是一段简单的实现代码:.btn-container { display: flex
在网页设计中,按钮的设计是必不可少的。而如何将两个按钮并列显示是一个常见的问题。这里我们可以使用 CSS 来实现。下面是一段简单的实现代码:
.btn-container { display: flex; justify-content: space-between; width: 200px; } .btn { padding: 10px 15px; background-color: pink; color: #fff; border: none; border-radius: 5px; cursor: pointer; }
上述代码中,我们通过一个容器(.btn-container)将两个按钮并列排列。这里使用了 Flexbox 布局,通过 justify-content: space-between;
属性让两个按钮靠两侧显示。同时,我们也可以设置容器的宽度属性 width: 200px;
以适应不同的页面布局。
对于按钮样式,我们使用了最基本的样式设置,如设置按钮间距(padding: 10px 15px;
),背景颜色(background-color: pink;
),文本颜色(color: #fff;
),边框(border: none;
)以及圆角(border-radius: 5px;
)。此外,我们还设置了指针样式(cursor: pointer;
),让鼠标移动到按钮上时出现光标。
最后,我们在 HTML 中,创建一个容器,并加上按钮的类,如下所示:
<div class="btn-container"> <button class="btn">按钮1</button> <button class="btn">按钮2</button> </div>
这样,两个并列的按钮就可以在页面上显示了。
粉丝
0
关注
0
收藏
0