Javascript 内联（非内联块）行为元素的最小宽度

我想在contenteditable div上设置最小宽度，旁边还有一些必须与该div保持内联的元素

我见过的每个解决方案都使用内联块，但我不能使用内联块行为。当内联块开始换行时，它的行为仍然类似于块元素，我需要div作为内联元素。我认为解决方案需要的不仅仅是CSS，但是当div的文本发生变化时，似乎很难设置任何事件。欢迎使用包含javascript和/或jQuery的解决方案

编辑：这是我试图做的一个简化版本。如果用户键入的文本比页面宽度多，则内联块和块之间的行为会有所不同，这正是我所关心的

<style type="text/css">
label {
    width: 40px;
    height: 40px;
}
#container {
    font-size: 32px;
}
#content {
    display: inline;
    min-height: 37px; /* doesn't work on inline elements */
    min-width: 80px; /* also doesn't work on inline elements */
}
</style>

<div id="container">
    <input type="radio" />
    <label>
        <span></span>
    </label>
    <span>(A)</span>
    <div id="content" contenteditable="true" unselectable="off">test</div>
</div>

标签{
宽度：40px；
高度：40px；
}
#容器{
字体大小：32px；
}
#内容{
显示：内联；
最小高度：37px；/*不适用于内联元素*/
最小宽度：80px；/*对内联元素也不起作用*/
}
（A）
测试

现在用于

浮动

像这样

a{
background:green;
  min-height:200px;
  float:left;
}

---

现场演示

现在用于浮动

像这样

a{
background:green;
  min-height:200px;
  float:left;
}

---

现场演示

好的，下面是我的答案（在jQuery中）。有人能给我一些建议，让我省去一些可能不会改变div内容或在div周围加上边框的事件吗？（我还关心剪切/粘贴）

$（“#内容”）.bind（'blur focus load resize scroll click click'+
'mousedown mouseup mousemove change'+
“选择向下键按下向上键”，功能（）{
如果（$（this）.width（）好的，下面是我（在jQuery中）得出的答案。有人能给我一些建议，让我省去一些可能不会改变div内容或在div周围放置边框的事件吗？（我还关心剪切/粘贴）

$（“#内容”）.bind（'blur focus load resize scroll click click'+
'mousedown mouseup mousemove change'+
“选择向下键按下向上键”，功能（）{
if（$（this）.width（）请将您的一些标记发布到这里，您已经尝试过了。我们需要一些代码来处理…也许可以制作一个。您应该将输入、标签和跨度放入一个容器中，给它指定一个特定的宽度+左浮动，然后用剩余的空间做您想做的事情。看起来您正试图通过向后接近它来解决问题.Inline不能有尺寸。如果你不想在容器上包装，你可以在容器上添加一个固定的宽度。只有我的2美分。不是官方的answer@mr.stobbe我不能这么做，因为我需要一个固定宽度的contenteditable div的全部原因是，当它为空时，用户可以点击它并添加文本此时，我将使用一个真正的hackity javascript解决方案，其中我将侦听div上的所有事件，然后在此基础上更改宽度。请将您的一些标记发布到这里，您已经尝试过的内容，我们需要一些代码来处理……也许可以制作一个。您可能只需将输入、标签和跨度放入一个容器中，然后t指定宽度+向左浮动，然后用剩余空间做你想做的。似乎你试图通过向后接近来解决问题。内联不能有尺寸。如果你想在容器上绝对不包装，你可以在容器上添加固定宽度。只要我的两美分。不是官方的answer@mr.stobbe我不能放弃这样做，因为我需要一个固定宽度的contenteditable div的全部原因是，用户可以在它为空时单击它并添加文本。这很好，我想在这一点上，我将使用一个真正的hackity javascript解决方案，在该解决方案中，我将侦听div上的所有事件，然后在此基础上更改宽度。@V413HAV尽管它可以工作，但会有更多而不是作为内容可编辑的标记容器工作（渲染基本上仍然相同）。这不是请求的行为。链接是一个块元素，因为指定了
float:left；
。@Arjan你说得对。它实际上是一个内联块。但我认为如果OP正在寻找一个魔弹，这个问题实际上是无法解决的。他们想要在流体上设置最小尺寸。这正是这个技巧的目的或内联块。浮点解决了另一个问题。内联表示流体。块表示尺寸。就这么简单。想象一下，如果在部分包裹的内联元素上设置最小高度，会是什么样子？它是一个块。@V413HAV但它可以工作，因此很可能作为一个内容可编辑的标记容器工作（渲染仍然基本相同）。这不是请求的行为。链接是一个块元素，因为指定了
float:left；
。@Arjan你说得对。它实际上是一个内联块。但我认为如果OP正在寻找一个魔弹，这个问题实际上是无法解决的。他们想要在流体上设置最小尺寸。这正是这个技巧的目的或者内联块可以。浮动解决了另一个问题。内联表示流体。块表示尺寸。就这么简单。想象一下，如果在部分包裹的内联元素上设置最小高度，会是什么样子？它是块。