Question

我想在一个contenteditable div上设置min-width，旁边有一些其他元素必须与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>

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

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

2 个答案: