[分享]css两个按钮水平二等分

在网页设计中，按钮是必不可少的元素之一。常见的按钮有很多种，如给出下面两个按钮： 按钮1 按钮2 但是，如果我们想让这两个按钮水平二等分，应该怎么做呢？我们可以给这两个按钮的容器添加一些CSS样式来进...

在网页设计中，按钮是必不可少的元素之一。常见的按钮有很多种，如给出下面两个按钮：

 <button class="btn btn-primary">按钮1</button>
  <button class="btn btn-secondary">按钮2</button> 

但是，如果我们想让这两个按钮水平二等分，应该怎么做呢？

我们可以给这两个按钮的容器添加一些CSS样式来进行处理：

 <div class="btns-container">
    <button class="btn btn-primary">按钮1</button>
    <button class="btn btn-secondary">按钮2</button>
  </div>

  <strong>.btns-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }</strong>

  /* 给按钮添加一些样式 */
  .btn {
    padding: .5rem 1rem;
    border-radius: .25rem;
    font-size: 1rem;
  }

  .btn-primary {
    background-color: #007bff;
    color: #fff;
    border: 1px solid #007bff;
  }

  .btn-secondary {
    background-color: #fff;
    color: #007bff;
    border: 1px solid #007bff;
  } 

我们可以看到，我们使用了Flex布局，并给容器添加了justify-content: space-between;，这样就可以让两个按钮水平二等分了。同时，我们也给每个按钮添加了一些样式，让它们看起来更加美观。

通过添加这些CSS样式，我们可以轻松地让两个按钮水平二等分。这是一种非常简单、方便的方法，适用于各种网页设计。