CSS中我们经常需要排列多个按钮,其中确保按钮等宽度排列就是一项非常基础和重要的任务。在本文中,我们将探讨如何使用CSS代码实现两个按钮并排等宽。 .btn { display: inline-blo
CSS中我们经常需要排列多个按钮,其中确保按钮等宽度排列就是一项非常基础和重要的任务。在本文中,我们将探讨如何使用CSS代码实现两个按钮并排等宽。
.btn {
display: inline-block;
background-color: #4CAF50;
color: white;
text-align: center;
font-size: 16px;
margin-right: 10px;
width: 50%; /* 这里是关键,保证宽度均分 */
padding: 10px;
text-decoration: none;
border: none;
border-radius: 5px;
cursor: pointer;
}
如上所示,我们定义了一个“btn”样式用于应用于按钮元素。通过将“display”属性设置为“inline-block”,我们可以让按钮在同一行中并排显示。在这个样式中,我们使用了背景颜色、颜色、字体大小、边距、宽度、内边距和圆角半径等属性,使每个按钮都具有一致的样式并且可以等宽排列。
<div class="button-container">
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
</div>
最后,我们将两个按钮放置在一个包含元素中,并使用“btn”样式来应用按钮样式。这样,在相同的容器内,两个按钮就能够占据相等的宽度,从而等宽排列。
总结:通过将“width”属性设置为“50%”以及其他一些CSS属性,我们可以轻松地使两个按钮并排等宽,而无需使用Javascript等其他工具。
粉丝
0
关注
0
收藏
0