javascript - 将文本 block 添加到 div 并设置宽度

Question

我有 Canvas

<div id="app-container">
    <div id="canvas-container">
        <div id="canvas"></div>
    </div>
</div>

在我的CSS中

#canvas {
  position: absolute;
  background-color: white;
  width: 100%;
  height: 100%;
}

#app-container {
  height: auto !important;
  min-height: 100%;
}

#canvas-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

我正在尝试将文本 block 添加到 Canvas

$container= $("#canvas");
var $view = $("#template-textview").tmpl();
$("<div class=\"text-field\">" + me.text + "</div>").appendTo($view);
$view.appendTo($container);

在该文本占据所有宽度之后。我怎样才能告诉它只采用文本所需的宽度？

提前致谢!

Answer 1

由于您使用的是 block 元素 (div)，它自然会扩展到父宽度的 100%。

要解决这个问题，请尝试使其成为 inline-block :

div.text-field { display: inline-block }