使用 w3.css 在项目之间添加空格答案

【问题标题】：Add space between items with w3.css使用 w3.css 在项目之间添加空格
【发布时间】：2018-09-17 17:04:56
【问题描述】：

我正在尝试制作一组按钮，但是尝试这样做时，按钮之间没有间隙。

<div className="w3-row">
            <div className="w3-col w3-right-align">
              <button className="w3-btn w3-blue w3-padding w3-round" onClick={this.previewImage} >Preview</button>
              <button className="w3-btn w3-green w3-padding w3-round" href="#" to="#">Generate PDF</button>
              <button className="w3-btn w3-red w3-padding w3-round" href="#" to="#">Delete</button>
              <button className="w3-btn w3-green w3-padding w3-round" href="#" to="#">Save</button>
              <Link className="w3-btn w3-blue w3-padding w3-round" href="#" to="#">Cancel</Link>
            </div>
          </div>

这会将按钮放下，但没有任何间隙。我真的不想要取消按钮右侧的间隙，因为它与屏幕右侧的框很好地对齐。我真的只想要每个按钮之间的间隙。这可能与 w3.css/

在每个按钮之间有一些填充并让它们彼此相邻的正确方法是什么？

我认为 w3-padding 属性会起作用，但如您所见 - 它不起作用。

【问题讨论】：

填充工作但不是你想要的。请阅读更多关于 CSS 盒子模型的信息。例如。这里 -> w3schools.com/css/css_boxmodel.asp
能否请您发送css。正如我已经用默认 w3.css 检查了你的 HTML。它工作正常。请检查链接。 jsfiddle.net/ckvgo7fd

标签： css w3.css

【解决方案1】：

只需再添加一个类“w3-margin-left”

【讨论】：

【解决方案2】：

我不知道 w3.js，但这是使用常规 css 实现的类似效果，对我来说，一旦你克服了 flexbox 的初始学习曲线，打字似乎少了很多，而且只花了一分钟或2实施。

.btn-group {
  display: flex;
  justify-content: flex-end;
}

.btn {
  margin-left: 5px;
  padding: 5px;
  border-radius: 5px;
}

.primary {
  background: cornflowerblue;
}

.danger {
  background: red;
}

.action {
  background: green;
}

<div class="btn-group">
  <button class=" btn primary">Preview</button>
  <button class="btn action">Generate PDF</button>
  <button class="btn danger">
Delete
</button>
  <button class="btn action">
Save
</button>
  <button class="btn primary">
Cancel
</button>
</div>

【讨论】：

【解决方案3】：

请改用margin。内边距在里面，边距在外面。在这种情况下，我建议尝试flexbox 并使用justify-content: space-between 来实现均匀分布和流畅的内容。

【讨论】：