Html中marquee标签当内容过多时左右滚动无法显示完全的解决方法

我们在制作网站时尤其是做企业官网时有时会使用到html的marquee做产品或者内容的展示，当内容过长时尤其是加入了图片会出现换行，这时需要在子块级元素中添加style="display: inline-flex;"，将对象作为内联块级弹性伸缩盒显示。

具体实现代码：

<marquee behavior="alternate" direction="left" width="100%" scrollamount="8" scrolldelay="100">
<ul style="padding: 0.0px;display: inline-flex;">
<li style="float: left;list-style: none;margin: 10.0px;">
<div>
<div><a href="#" target="_blank"><span><img src="1.jpg" width="340" height="400"></span></a></div>
</div>
</li>
<li style="float: left;list-style: none;margin: 10.0px;">
<div>
<div><a href="#" target="_blank"><span><img src="1.jpg" width="340" height="400"></span></a></div>
</div>
</li>
<li style="float: left;list-style: none;margin: 10.0px;">
<div>
<div><a href="#" target="_blank"><span><img src="1.jpg" width="340" height="400"></span></a></div>
</div>
</li>
<li style="float: left;list-style: none;margin: 10.0px;">
<div>
<div><a href="#" target="_blank"><span><img src="1.jpg" width="340" height="400"></span></a></div>
</div>
</li>
<li style="float: left;list-style: none;margin: 10.0px;">
<div>
<div><a href="#" target="_blank"><span><img src="1.jpg" width="340" height="400"></span></a></div>
</div>
</li>
</ul>
</marquee>


本文为胖虎原创文章,转载无需和我联系,但请注明来自胖虎博客panghucat.cn