如何在两个引导按钮之间留出空间

Question

您可以看到下面的代码我试图在同一行中创建两个按钮，但它不起作用我想在此代码中在同一行中创建两个按钮

 <div class="w3-show-inline-block">
  <div class="w3-bar">
    <button class="btn btn-success"  onClick={() => this._filterByYear('2006')}>2006</button>
    <button class="btn btn-success"  onClick={() => this._filterByYear('2007')}>2007</button>
  </div>
  </div>
  <div class="w3-show-inline-block">
  <div class="w3-bar">
    <button class="btn btn-success"  onClick={() => this._filterByYear('2008')}>2008</button>
    <button class="btn btn-success"  onClick={() => this._filterByYear('2009')}>2009</button>

在这里的演示代码中为什么我想要这样的两个按钮之间没有空格https://ibb.co/rFD6knk

Demo

Answer 1

这是一个很好的解决方案。只需将其粘贴到您的 CSS 中：

.w3-bar {
    display: flex; 
    justify-content: space-between;
}

Answer 2

添加这个 CSS ：

button {
    margin-left: 10px;
    margin-top: 10px;
    background: white;
    padding: 10px 20px;
    border: none;
}

这里 margin-left 会给你两个之间的空间，我在这里添加了更多的样式选项，这将对你有所帮助。

margin-left 和 margin-top 提供空间，background 更改按钮的背景，padding 在按钮内部添加空间，border 去除默认边框。

Answer 3

这些样式就可以了。

.w3-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  padding: 5px 0;
}

.w3-btn {
  max-width: fit-content;
}

nav {
  max-width: 200px;
}

img {
  width: 100%;
}

Codepen