在 div 中跨度固定宽度

Question

我有 div，我需要固定宽度的 6 个跨度（现在有一些文本）- 当我删除文本时，宽度为 0px。我能做什么？我用 display: block; 尝试了圆顶的东西，但它在它们下面移动了跨度..

#load-1 {
  border-bottom: 3px pink solid;
  width: 10px;
  height: 10px;
}
#load-2 {
  border-bottom: 3px grey solid;
}
#load-3 {
  border-bottom: 3px grey solid;
}
#load-4 {
  border-bottom: 3px grey solid;
}
#load-5 {
  border-bottom: 3px grey solid;
}
#load-6 {
  border-bottom: 3px grey solid;
}

<div class="load">
  <span class="loading" id="load-1">hello</span>
  <span class="loading" id="load-2">hello</span>
  <span class="loading" id="load-3">hello</span>
  <span class="loading" id="load-4">hello</span>
  <span class="loading" id="load-5">hello</span>
  <span class="loading" id="load-6">hello</span>
</div>

Answer 1

使用display:inline-block。它会起作用。

Answer 2

我不知道我是否理解正确，但我的理解是至少应该有一个带下划线的块，即使它不包含文本。您需要做的是从 span 中生成 div，因为您不能将宽度应用于 span 标签。那么你应该给div一个height和css中的min-width。使用 min-width，您可以确保即使 div 为空，它也至少具有这个最小宽度。

看看我的fiddle： http://jsfiddle.net/e8t64vtk/2/

在 div 中跨度固定宽度

Span fix width in div

html

css

width