CSS设置上图下文布局，固定宽度，超出部分滑动展示

最新推荐文章于 2025-04-07 22:20:05 发布

wh_week8

最新推荐文章于 2025-04-07 22:20:05 发布

阅读量677

点赞数

分类专栏： CSS 文章标签： css 上图下文布局固定宽度超出滑动

本文链接：https://blog.youkuaiyun.com/u014505277/article/details/117782067

版权

本文介绍如何使用CSS创建一个上图下文的布局，内容区域具有固定宽度，并且当内容超出时可以水平滑动查看。提供了一个实现此效果的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

直接上代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
   <style type="text/css">
	   .badge{
			width: 30%;
			text-align: center;
			border: 1px solid #000;
		}
		.badge ul{
			width: auto;
			overflow-x: auto;
			white-space: nowrap;
		}
		.badge li{
			display: inline-block;
			width: 60px;
			height: 50px;
		}
		.badge li img{
			width: 50px;
		}
		.badge li .p{
			font-size:7px
		}
   </style>
</head>
<body>
   <div class="badge">
		<ul>
			<li>
				<img src="portfolio/1.jpg" align="bottom">
                &