2

カスタム ツリーの作成では、画像の後にラベルを付けて使用しています。問題は、ラベルがオーバーフローすると画像の下に入り、テキストの開始点に合わせる必要があることです。cssでそれを行うにはどうすればよいですか。

サンプルコード:

<html>
  <body>
    <div class="maindivclass">
        <ul>
            <li id="TR_239984" class="liclass">
                <img src="http://dummyimage.com/32x16" class="imgclass" />
                <label class="labelclass">This is a long text to show wrapping of the text from the box edge</label>
            </li>
            <li id="TR_239985" class="liclass">
                <img src="http://dummyimage.com/32x16" class="imgclass" />
                <label class="labelclass">This is another long text to show wrapping of the text from the box edge</label>
            </li>
        </ul>
    </div>
  </body>
</html>

こちらでサンプルをご確認ください

私はそれを次のようにする必要があります: http://imgur.com/Yp9hC

どちらかをクリックすると2つの異なることが行われるため、画像とテキストを別々にする必要があるため、リストスタイルに背景画像を使用できない限り、それを使用することはできません。

ありがとう

4

4 に答える 4

1

これを試してください -デモ

li {
    position: relative;
    list-style: none;
}

li img {
    position: absolute;
}

li label.labelclass {
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 32px;
    display: block;
}
于 2012-10-31T17:12:30.000 に答える
0

これを試して：

.maindivclass {
    width: 300px;
}

li { 
    float: left;
    position: relative; 
    list-style: none;
}

.img_container {
    float: left;
    width: 40px;
    padding: 0px;
}

li label.labelclass {
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
    float: left;
    width: 250px;
}

HTML

<li id="TR_239984" class="liclass">
    <div class="img_container">
        <img src="img.png" class="imgclass" />
    </div>
    <label class="labelclass">
        This is a long text to show wrapping of the text from the box edge
    </label>
</li>

.img_container クラスを追加したのは、img を歪めずに幅の設定を単純化したからです。

ここでフィドル

于 2012-10-31T17:17:47.550 に答える
0

これは、CSS フロートを使用する絶好の機会です。画像とラベルの両方を左にフロートさせ、定義された幅を与えます。.liclass のフロートを「クリア」してください。

http://codepen.io/imjared/pen/EDgHcを参照してください。

于 2012-10-31T17:17:41.357 に答える
0

最適なコードを教えてください。

HTML:

<div class="wrapper">
    <div class="box-one">
        <img src="http://dummyimage.com/32x16" />
    </div>
    <div class="box-two">
This is a long text to show wrapping of the text from the box edge. This is a long text to show wrapping of the text from the box edgeThis is a long text to show wrapping of the text from the box edge.      
    </div>
    <div class="clear"></div>


     <div class="box-one">
        <img src="http://dummyimage.com/32x16" />
    </div>
    <div class="box-two">
This is a long text to show wrapping of the text from the box edge. This is a long text to show wrapping of the text from the box edgeThis is a long text to show wrapping of the text from the box edge.       
    </div>
    <div class="clear"></div>

</div>

CSS:

.clear{
    clear:both;
}
.wrapper{
    width:800px;
    background:#E6E6E6;

}
.box-one{
    float:left;
    width:50px;
    margin-bottom:30px;
}
.box-two{
    float:right;
    width:750px;
}

これが間違いなく役立つことを願っています。応援してください。

于 2012-11-01T13:31:43.810 に答える