overflow:hidden清除浮动的一个简单的列子

2,146 阅读
	<style type="text/css" media="screen">
	*{
		margin: 0;
		padding: 0;
	}
	.news{
       width: 500px;
       height:300px;
       border:1px solid #000;
       margin: 100px;
	}
	ul{
		list-style: none;
		/*去掉列表的小圆点*/
	}
	li{
		border-bottom: 1px dashed gray;
		/*下底框:虚线*/
		overflow: hidden;
	}
    .tittle{
    	float: left;
    }
    .date{
    	float: right;
    }

</style>
</head>
<body>
	<div class="news">
		<ul>
			<li>
				<span class="tittle">新闻标题</span>
				<span class="date">时间</span>
			</li>
			<li>
				<span class="tittle">新闻标题</span>
				<span class="date">时间</span>
			</li>
			<li>
				<span class="tittle">新闻标题</span>
			    <span class="date">时间</span>
			</li>
		</ul>
	</div>
</body>

DataLearner 官方微信

欢迎关注 DataLearner 官方微信,获得最新 AI 技术推送

DataLearner 官方微信二维码