[分享]css两个按钮并排等宽

CSS中我们经常需要排列多个按钮，其中确保按钮等宽度排列就是一项非常基础和重要的任务。在本文中，我们将探讨如何使用CSS代码实现两个按钮并排等宽。 .btn { display: inlineblo...

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等其他工具。