css两个按钮并排有间距

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

在网页设计中,经常需要将两个按钮并排放置并留有间距,这可以通过CSS来实现。以下是一种简单的方法:.button { display: inline-block; padding: 10px 20px

在网页设计中,经常需要将两个按钮并排放置并留有间距,这可以通过CSS来实现。以下是一种简单的方法:

.button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: white;
  text-align: center;
  font-size: 16px;
  margin-right: 20px; /*设置右侧间距*/
}

button:last-child {
  margin-right: 0;/*最后一个按钮去掉间距*/
} 

上述代码中,我们定义了一个名为“button”的类,作为按钮的样式。我们使用“display:inline-block”来让按钮出现在同一行上,并设置左右内边距为10像素,上下内边距为20像素。通过“border:none”来去掉按钮边框,通过“background-color”来设置背景颜色。 “color”用于设置文本颜色,而“text-align:center”可将按钮上的文本设置为居中对齐。最后,通过“margin-right”来设置按钮之间的右边距。

如果不想在最后一个按钮之后留有空隙,可以使用“:last-child”伪类来为最后一个按钮删除右边距。下面是一个示例HTML代码:

<button class="button">Button 1</button>
<button class="button">Button 2</button> 

使用上述CSS代码,两个按钮会并排展示,两者之间会有20像素的间距。如有更多按钮需要排列,则可以在HTML代码中添加更多同样具有“button”类的按钮即可。

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css两个按钮并排有间距

粉丝

0

关注

0

收藏

0

已有0次打赏