1

contenteditable div に最小幅を設定し、その横に他の要素を配置して、div とインラインのままにしておく必要があります。

私が見たすべてのソリューションはインライン ブロックを使用していますが、インライン ブロックの動作は使用できません。inline-block がラッピングを開始しても、ブロック要素のように動作するため、インライン要素として動作するには 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>
4

2 に答える 2

2

今は慣れたfloating

このように

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

ライブデモhttp://tinkerbin.com/3Ho3Af9c

于 2012-07-20T04:28:58.897 に答える
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");
    }
})
于 2012-07-20T17:09:28.907 に答える