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

这将是使用 CSS 浮动的最佳时机。将图像和标签都浮动到左侧并给它们定义的宽度。确保“清除” .liclass 上的浮动

见http://codepen.io/imjared/pen/EDgHc

于 2012-10-31T17:17:41.357 回答
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

听到我给你最好的代码。

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