关于div＞ul＞li文本超出自适应宽度隐藏问题

最新推荐文章于 2022-06-04 08:05:57 发布

原创最新推荐文章于 2022-06-04 08:05:57 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html

不要给div、ul、li设置宽度，可设置为100%

有多余的代码，没做删除，可自行调试删除，图片背景自己调换，文中还涉及到了

overflow：hidden下li标签图标消失问题，用list-style-position：inside；可解决图标问题，也可以改变图标样式颜色等，多余功能请读者自行探索，作者小白，大佬勿喷，谢谢！！！！

<div class="xa-main2">
	<img src="img/img_li-icon.png">
		<ul>
		   <li>滚动提示文字滚动提示文字滚动提示文字滚动提示文字滚动提示文字</li>
		   <li>滚动提示文字滚动提示文字滚动提示文字滚动提示文字滚动提示文字</li>
		</ul>
		<a><img src="img/arrow.png"></a>
</div>

<style>
.xa-main2 {
	width: 100%;
	display: flex;
	align-items: center;
	
}
.xa-main2>img {
	height: 40px;
}

.xa-main2>ul {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
	margin-top: 10px;
	margin-bottom: 10px;
}
.xa-main2>a {
	margin-right: 3%;
}

.xa-main2>ul>li {
	width: auto;
	list-style-type: disc;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	list-style-position: inside;
	font-size: 16px;
	margin-right: 2%;
}
.xa-main2>ul>li::marker {
	color: #237ff1;
}
</style>