gpt4 book ai didi

css - 图文树形结构,溢出后使用CSS对齐文本

转载 作者:行者123 更新时间:2023-11-28 12:21:59 25 4
gpt4 key购买 nike

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

请检查 sample here

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

我需要将图像和文本分开,因为单击其中一个会执行两种不同的操作,因此不能将背景图像用于列表样式,除非它也可以使用它。

谢谢

最佳答案

试试这个 - 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;
}

关于css - 图文树形结构,溢出后使用CSS对齐文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13162999/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com