html - 如何防止 span 标签相互重叠？

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值将不适用。您可以将其设置为内联 block ，阅读 this post了解更多它们之间的差异。

UPDATED DEMO

.alphas {
    display: inline-block;
}

还有一件事 - 浏览器还会在内联* 级别元素上呈现空白，请遵循 this post了解更多信息。