div中的定跨宽度

Question

我有div，我需要有固定宽度的6跨(现在有一些文本)-当我删除文本时，宽度是0px。我能做什么?我试过用display: block;做穹顶的东西，但是它在它们下面移动。

这是一个JSFiddle演示。

​

#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

我不知道是否正确，但我理解的是，至少应该有一个带下划线的块，即使它不包含文本。您需要做的是利用div来实现span，因为不能将宽度应用于跨标记。然后，您应该在css中为div提供一个height和min-width。使用min-width时，要确保即使div是空的，它至少也有这个最小宽度。

看看我的小提琴：http://jsfiddle.net/e8t64vtk/2/

Answer 2

使用display:inline-block。看起来不错。