div 在较小的屏幕尺寸中重叠

Question

我正在开发一项功能，其中每个字母都应该在自己的框中，我正在尝试设置样式。盒子应该一个挨着一个或排成多行，在任何一种情况下它们之间都有一个边距。它工作正常，直到我将屏幕尺寸更改为较小（或在移动设备上进行测试），然后底部行的字母与上面行的字母重叠。更改 margin 不会对较小屏幕中的每个框应用全方位边距。我尝试添加 overflow:auto 但没有发现差异。我怎样才能让每个字母框以所需的边距分开而不重叠（即使元素需要在屏幕调整大小时间隔成两行）？

我看到有人问过类似的问题before，但我不确定如何传递答案。

在视图中：

<div class="booyah-box col-xs-10 col-xs-offset-1">
  <h2 class="text-center">
    <% scrambled_word_array.each do |character| %>
      <div class="boxed-letter"><%= character %></div>
    <% end %>
  </h2>
</div>

相关CSS：

.booyah-box {
  -moz-box-shadow: 1px 1px 2px 0 #d0d0d0;
  -webkit-box-shadow: 1px 1px 2px 0 #d0d0d0;
  box-shadow: 1px 1px 2px 0 #d0d0d0;
  background: #fff;
  border: 1px solid #ccc;
  border-color: #e4e4e4 #bebebd #bebebd #e4e4e4;
  padding: 10px;
  font-family: "Lucida Grande", sans-serif;
}

.booyah-box .boxed-letter {
  display: inline;
  padding: 8px;
  margin: 2px;
  border: 1px solid black;
  border-radius: 5px;
  background: grey;
  font-family: "Courier New", Courier, monospace;
  color: white;
}

Answer 1

在 .boxed-letter 上尝试 display: inline-block;，应该给它们自己的 space 并防止它们重叠

Answer 2

这对你有帮助

而不是 display: inline 使用 display: inline-block

对我来说效果很好。

div 在较小的屏幕尺寸中重叠

divs overlap in smaller screen size

html

css

ruby-on-rails

margin