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

Question

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

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

在 View 中:

<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

这对你有帮助

代替 display: inline 使用 display: inline-block

对我来说很好用。