Question

为什么<span>标签相互重叠，以及如何防止这种情况？我需要它们很好地环绕屏幕，这样它们就不会妨碍其他人的观点。

HTML：

<span class="alphas">#</span>
<span class="alphas">A</span>
<span class="alphas">B</span>
<span class="alphas">C</span>
<span class="alphas">D</span>
etc...

CSS：

.alphas {
    border-radius: 5px;
    border: 12px solid #8AC007;
    padding: 20px;
    background-color: #006677;
    width: 200px;
    height: 150px;
}

参见演示 - http://jsfiddle.net/uyg0zdLf/

Answer 1

<span>标记默认为内联级别，width和height值不适用。您可以将其设置为内联块，阅读this post以了解它们之间的更多差异。

的 UPDATED DEMO

.alphas { display: inline-block; }

还有一件事 - 浏览器还会在内联*级别元素上呈现空白区域，请点击this post获取更多信息。

Answer 2

默认情况下，

span个元素是内联的。要使它们生成框，您必须使用inline-block：

.alphas {
    display: inline-block;
}

.alphas {
  border-radius: 5px;
  border: 12px solid #8AC007;
  padding: 20px; 
  background-color: #006677;
  width: 200px;
  height: 150px;
  display: inline-block;
}

<span  class="alphas">#</span>
<span  class="alphas">A</span>
<span  class="alphas">B</span>
<span  class="alphas">C</span>
<span  class="alphas">D</span>
<span  class="alphas">E</span>
<span  class="alphas">F</span>
<span  class="alphas">G</span>
<span  class="alphas">H</span>
<span  class="alphas">I</span>
<span  class="alphas">J</span>
<span  class="alphas">K</span>
<span  class="alphas">L</span>
<span  class="alphas">M</span>
<span  class="alphas">N</span>
<span  class="alphas">O</span>
<span  class="alphas">P</span>
<span  class="alphas">Q</span>
<span  class="alphas">R</span>
<span  class="alphas">S</span>
<span  class="alphas">T</span>
<span  class="alphas">U</span>
<span  class="alphas">V</span>
<span  class="alphas">W</span>
<span  class="alphas">X</span>
<span  class="alphas">Y</span>
<span  class="alphas">Z</span>

Answer 3

span标记默认为内联显示属性。听起来你想要的更像是内联块。设置如下：

.alphas { display: inline-block; }

见这里：http://jsfiddle.net/uyg0zdLf/1/

如何防止跨度标签相互重叠？

3 个答案: