inline (非inline-block)行为元素的最小宽度

Question

我想在一个可内容编辑的div上设置最小宽度，旁边还有一些必须与div保持内联的元素。

我见过的每个解决方案都使用内联块，但我不能使用内联块行为。当inline-block开始包装时，它的行为仍然像一个block元素，我需要div作为一个inline元素。我想解决方案需要的不仅仅是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>

Answer 1

好的，这是我想出来的答案(用jQuery写的)。有没有人能给我一些建议，让我省略掉一些可能不会改变div内容或在div周围放置边框的事件？(我也关心剪切/粘贴)。

$('#content').bind('blur focus load resize scroll click dblclick ' +
        'mousedown mouseup mousemove change ' +
        'select keydown keypress keyup', function () {
    if($(this).width() <= 80) {
        $(this).css("display", "inline-block");
    }
    else {
        $(this).css("display", "inline");
    }
})

Answer 2

现在已经习惯了floating

就像这样

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

实时演示http://tinkerbin.com/3Ho3Af9c