Question

对不起，我只是一个新手设计师。我想问一下，如何让背景颜色移到顶部？它仍然被白色空间（背景颜色的顶部）分开

<!DOCTYPE html>
<html>
	<head>
		<style>
			body{
				margin: 0px;
				padding: 0px;
			}
			#navbar{
				position: relative;
				background: #004f6b;
				height: 100px;
				color: white;
			}
			li{
				list-style-type:none;
				display:inline;
			}
			#navbar > ul > li#title{
			position: absolute;
			left: 5px;
			}
			#navbar > ul > li#homeicon{
			position: absolute;
			left: 610px;
			}
			#navbar > ul > li#search{
			position: absolute;
			right: 300px;
			}
			#navbar > ul > li#profile{
			position: absolute;
			right: 5px;
			}
		</style>
	</head>
	<body>
		<div id="navbar">
			<ul>
				<li id="title">Title</li>
				<li id="homeicon">Icon</li>
				<li id="search"><input type="text" style="width:210%"/></li>
				<li id="profile">Follow Us!</li>
			</ul>
		</div>
	</body>
</html>

屏幕截图：http://i58.tinypic.com/rhr8xt.png 抱歉我的英语不好，对不起我的不良技巧...感谢您的帮助...

Answer 1

ul元素的默认margin正在推送所有内容。您只需在margin: 0;上指定ul即可解决此问题。

<!DOCTYPE html>
<html>
	<head>
		<style>
			body{
				margin: 0px;
				padding: 0px;
			}
			#navbar{
				position: relative;
				background: #004f6b;
				height: 100px;
				color: white;
			}
			li{
				list-style-type:none;
				display:inline;
			}
                        #navbar > ul {
                                margin: 0;
                        }
			#navbar > ul > li#title{
			position: absolute;
			left: 5px;
			}
			#navbar > ul > li#homeicon{
			position: absolute;
			left: 610px;
			}
			#navbar > ul > li#search{
			position: absolute;
			right: 300px;
			}
			#navbar > ul > li#profile{
			position: absolute;
			right: 5px;
			}
		</style>
	</head>
	<body>
		<div id="navbar">
			<ul>
				<li id="title">Title</li>
				<li id="homeicon">Icon</li>
				<li id="search"><input type="text" style="width:210%"/></li>
				<li id="profile">Follow Us!</li>
			</ul>
		</div>
	</body>
</html>

Answer 2

最好使用

*
{
padding:0px;
margin:0px;
}

通过在*中声明一个css，意味着将从每个html元素中删除所有预定义的填充和边距。

这是最好的做法。因为很难找出每个元素的填充/边距

[CSS]如何让它移到顶端？

2 个答案: