javascript - 如何将附加元素保留在父元素中？

Question

请重新调整输出的宽度并查看此演示:

cite{
  position: absolute;
  display:block;
  font-style: normal;
  margin-left: 10px;
  width: 30%;
  border:2px solid;
}

span{
  padding: 0px 15px;
  border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<cite>
  <span>one</span>
  <span>two</span>
  <span>tjree</span>
  <span>four</span>
</cite>

一切顺利。现在，当我附加那些 <span>使用 JS 的元素，然后是 <cite> 的边界失败。看看这个:

$("cite").html("<span>one</span><span>two</span><span>tjree</span><span>four</span>");

cite{
  position: absolute;
  display:block;
  font-style: normal;
  margin-left: 10px;
  width: 30%;
  border:2px solid;
}

span{
  padding: 0px 15px;
  border: 1px solid gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<cite></cite>

正如我所说，我希望始终保留那些 <span> <cite> 内部(在溢出时更改 height 的 cite)。我该怎么做？

---

注意:这两个属性很重要，我不能删除/更改它们:

  position: absolute;
  display:block;

Answer 1

您可以将display: inline-block 添加到span Fiddle

$("cite").html("<span>one</span><span>two</span><span>tjree</span><span>four</span>");

cite{
  position: absolute;
  display: block;
  font-style: normal;
  margin-left: 10px;
  width: 30%;
  border: 2px solid;
}

span{
  padding: 0px 15px;
  border: 1px solid gray;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<cite></cite>