Question

在创建自定义树时，我使用的是图像，后跟标签。问题是当标签溢出时它会在图像下面，而我需要它与文本的起始点对齐。我怎么用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>

请检查示例 here

我需要看起来像：http://imgur.com/Yp9hC

我需要图片和文字分开，因为点击或者做两件不同的事情，所以不能使用背景图片作为列表样式，除非它也可以使用它。

由于

Answer 1

试试这个 - DEMO

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

Answer 2

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

请参阅http://codepen.io/imjared/pen/EDgHc

Answer 3

试试这个：

.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倾斜。

小提琴here

Answer 4

听听我给你最好的代码。

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

希望这绝对可以帮到你。欢呼。

树形结构与图像和文本，溢出后使用CSS对齐文本

4 个答案: