html - 子状态低于主要状态

Question

我可能想太多了，忽略了简单的解决方案，但我就是想不出那个简单的解决方案。

我有一个这样的广义“状态”的内联列表

<span><b>Department:</b> No Task Started</span>
<span><b>Department:</b> No Task Started</span>
<span><b>Department:</b> No Task Started</span>
<span><b>Department:</b> No Task Started</span>

而且我需要在每个人的下方放置几乎像“子状态”一样的位置，而无需强制定位它们或将它们放在桌子上。因此，他们将在每个跨度下方进行通用任务。

我试图将它们单独放置ul，然后内联显示它们，但它们没有正确显示。我还尝试将它们放在单独的 p 标签中，看看是否可行，但我失败了。

我的 js 小提琴 http://jsfiddle.net/kZFAG/1/

任何帮助都会很棒！

Answer 1

这样的东西合适吗？

我display:inline-block在元素上使用，然后display:block在“状态”元素上使用。我还将状态元素移动为容器的子元素。