1. 程式人生 > >關於導航欄的li標籤不在父級div下同行顯示

關於導航欄的li標籤不在父級div下同行顯示

試著寫一個簡單的導航欄,給li標籤設定了浮動,雖然li標籤同行了,但是發現li標籤不在div內(指如果高度不夠長,我div高度是40px),試了好多,原來是忘了清楚浮動,上程式碼!! 我的是HTML5,至於其他的還沒嘗試過

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			//就是這個"*",清除所有標籤的外邊距和內邊距,
			* {
				margin:0px;
				padding:0px;
			}
			#div1 {
				height: 40px;
				width: 100%;
				border: 1px solid red;
				background-image: url(css/logo.png);
				background-repeat: no-repeat;
				background-size:70px 37px ;
				background-position-x: 10px;
			}
			#div1 ul {
				border: 1px solid green;
				width: 300px;
				height: 40px;
				list-style: none;
				margin-left: 100px;
				
			}
			#div1 ul li{
				border: 1px solid black;
				float: left;
				margin:8px 28px 8px 0px;
				
			}
			a:link {
				text-decoration: none;
				color: #000000;
			}
			a:hover {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<ul>
				<li><a href="#">首頁</a></li>
				<li><a href="#">部落格</a></li>
				<li><a href="#">留言板</a></li>
				<li><a href="#">個人資訊</a></li>
			</ul>
		</div>
	</body>
</html>