4

画像例:

ここに画像の説明を入力

そしてJSBIN のコード。

状況は、それぞれの横に「情報アイコン」が付いたラベルが付いたチェックボックスのリストを作成しようとしているということです。

アイデアは、ラベルをクリックすると、チェックボックスがトリガーされ (そうあるべきです)、JS でいくつかのアクションを開始するというものです。

情報アイコンは、クリックして詳細情報を取得するためのツール ヒントです。情報アイコンには独自の相互作用があるため、ラベルがチェックボックスの相互作用を開始するため、ラベル内にインラインで貼り付けることはできません。

だから私がやろうとしているのは、情報アイコンをラベルテキストにできるだけ近づけることです。残っているすべてのラベルをフローティングして、必要なだけ小さく折りたたむことでこれを行いました。次に、情報アイコンを次の行に押し込まないように、ラベルに最大幅を指定します。

問題: ラベルが折り返されていない場合 (最初のラベル)、ラベルが折りたたまれてテキスト (緑の境界線) と同じ幅になることに注意してください。ただし、ラベルを折り返す必要がある場合 (他のすべての例)、ラベルは最大幅のサイズになります。緑の境界線を取り除くと、情報アイコンがテキストから任意の一見ランダムな距離に視覚的に浮かんでいるように見えるので、これはおかしいように見えます。

質問: テキストが折り返されたときに、フローティング オブジェクトをテキストと同じ幅に折りたたむ方法はありますか、それとも CSS で機能するのですか?

編集：

明確にするために、上記のサンプル画像/コードが次のようなものを生成することを望みます:

ここに画像の説明を入力

すべてのラベル (緑色の境界線) が折りたたまれて、テキストが折り返されている場合でも、幅がテキストと同じになることに注意してください。

編集2：

私は問題を理解していると思います...問題は、最大幅があるためにテキストが折り返されていることです。つまり、コンテンツ (テキスト) は最大幅よりもはるかに広いため、明示的に指定されていない場合、div を特定の幅に折りたたむことはできません。

そのため、これに対する解決策はないと思います。CSS は、これを処理するように設定されていません。

4

2 に答える 2

3

純粋な CSS ソリューションをぜひ見てみたいです。私はスクリプトでこれを解決することができました。

このWorkinf Fiddleを試してください

HTML (ここでは変更なし)

CSS

ul, li
{
  list-style: none;
  margin: 0px;
  padding: 0px;
}

ul
{
  border: 1px solid red;
  width: 200px;
}

li
{
  margin: 10px 0;
}


li *
{
  vertical-align: top;
}

label
{
  border: 1px solid green;
  display: inline-block;
  max-width: 150px;
}

.infoIcon
{
  color: blue;
  display: inline-block;
}

JQuery:この投稿から取得

$.fn.textWidth = function () {
    var html_org = $(this).html();
    var html_calc = '<span>' + html_org + '</span>';
    $(this).html(html_calc);
    var width = $(this).find('span:first').width();
    $(this).html(html_org);
    return width;
};

$(document).ready(function () {
    $("label").each(function ()
    {
        $(this).width($(this).textWidth() + 2);
    });
});
于 2013-09-23T20:50:20.093 に答える
-1

次の CSS プロパティを変更してください:--

label {
float: left;
margin-left: 20px;
max-width: 150px;
min-width: 150px;
border: 1px solid green;
}

JSBIN を参照してください:- http://jsbin.com/ucamOW/9

教えてください それはあなたが望むものと同じですか?

于 2013-09-23T18:28:49.527 に答える