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

【问题标题】：min-width on inline (not inline-block) behaving element内联（非内联块）行为元素的最小宽度
【发布时间】：2012-07-20 04:26:59
【问题描述】：

我想在内容可编辑的 div 上设置最小宽度，并在其旁边设置一些其他元素，这些元素必须与 div 保持一致。

我见过的每个解决方案都使用内联块，但我不能使用内联块行为。当 inline-block 开始换行时，它仍然表现得像块元素，我需要 div 表现得像一个内联元素。我想这个解决方案需要的不仅仅是 CSS，但是当 div 的文本发生变化时设置任何事件似乎非常困难。欢迎使用涉及 javascript 和/或 jQuery 的解决方案。

编辑：这是我正在尝试做的简化版本。如果用户输入的文本比页面宽度多，那么 inline-block 和 block 之间的行为会有所不同，这就是我所关心的。

<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>

【问题讨论】：

请在此处发布您迄今为止尝试过的一些标记
我们需要一些代码来使用...也许可以创建一个JSFiddle。
您可能应该只是将输入、标签和跨度放入容器中，给它一个特定的宽度 + 向左浮动，然后对其余空间做您想做的事情。似乎您正试图通过倒退来解决某些问题。内联不能有尺寸。如果您绝对不希望在该点包装，您可以随时在#container 上添加固定宽度。只是我的两分钱。不是官方回答
@mr.stobbe 我不能这样做，因为我需要一个固定宽度的 contenteditable div 的全部原因是用户可以在它为空时单击它并添加文本。没关系，我认为此时我将使用一个非常 hackity 的 javascript 解决方案，在该解决方案中我监听 div 上的所有事件，然后根据它更改宽度。

标签： javascript jquery html css

【解决方案1】：

现在习惯了floating

像这样

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

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

【讨论】：

@V413HAV 它虽然有效，但很可能用作内容可编辑标记的容器（渲染仍然基本相同）。
这不是请求的行为。链接是块元素，因为指定了float: left;。
@Arjan 你是对的。它实际上是一个内联块。但我认为如果 OP 正在寻找灵丹妙药，这个问题实际上是无法解决的。他们想为流动的东西设置最小尺寸。这正是这个技巧或内联块所做的。浮动解决了另一个问题。 inline 表示流体。块意味着尺寸。就这么简单。想象一下，如果您在部分包裹的内联元素上设置最小高度。那会是什么样子？这是一个障碍。

【解决方案2】：

好的，这是我想出的答案（在 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");
    }
})

【讨论】：