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

我不知道我是否做得对，但我明白的是，即使它不包含任何文字，至少应该有一个带下划线的块。您需要做的是从div中取出span，因为您无法将宽度应用于范围标记。然后，您应该在css中提供div height和min-width。使用min-width，即使div为空，也要确保它至少具有此最小宽度。

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

Answer 2

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

跨度以div为单位修复宽度

2 个答案: