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

min-width on inline (not inline-block) behaving element

本文关键字：元素 最小宽度 内联      更新时间：2023-11-27

我想设置一个可编辑内容的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>

现在用于floating

就像这个

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

现场演示http://tinkerbin.com/3Ho3Af9c

好吧，这是我（在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");
    }
})
相关文章：