CSS学习笔记----float简单实现

最新推荐文章于 2024-10-02 15:35:50 发布

庄公梦蝶

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量372

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/u014548034/article/details/40891199

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>float实现</title>
	</head>
	<style type="text/css">
		*{
		padding:0px;
		margin:0px;
	}
	/*当外部标签的宽度不满足进行float标签的宽度，会自动换行，对于IE浏览器该标签仍然占用空间，而对于
	  除IE外的浏览器，该标签将不占用空间*/
	#nav{
		margin:50px;
		width:1000px;
		border:1px solid #999;
	}
	#nav ul{
		list-style:none;
	}
	#nav ul li{
		border:#339 1px solid;
		width:120px;
		float:left;           /*这个设置为让li中的数据往左飘，还有一个选项为right*/
	}
	</style>
	
	<body>
		<div id="nav">
			<ul>
				<li>返回首页</li>
				<li>摇滚音乐</li>
				<li>另类电影</li>
				<li>联系我们</li>
				<li>网站导航</li>
				<li>网站帮助</li>
			</ul>
		</div>
	</body>
</html>