Question

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

＆＃13;

cite{
  position: absolute;
  display:block;
  font-style: normal;
  margin-left: 10px;
  width: 30%;
  border:2px solid;
}

span{
  padding: 0px 15px;
  border: 1px solid gray;
}

＆＃13;

<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>

＆＃13;

一切都很好。现在，当我使用JS追加这些<span>元素时，<cite>的边界失败了。看看这个：

＆＃13;

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

＆＃13;

cite{
  position: absolute;
  display:block;
  font-style: normal;
  margin-left: 10px;
  width: 30%;
  border:2px solid;
}

span{
  padding: 0px 15px;
  border: 1px solid gray;
}

＆＃13;

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

＆＃13;

正如我所说，我希望始终将<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>

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

1 个答案: