css - [CSS]如何让它移动到顶部?

标签 css navbar

对不起,我只是一个新手设计师。我想问一下,如何让背景色移到最上面?它仍然被白色空间(背景颜色的顶部)分割

<!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 对不起我的英语不好,对不起我的技能不好......谢谢你的帮助......

最佳答案

ul 元素有一个默认的 margin,它将所有内容向下推。您可以简单地在 ul 上指定 margin: 0; 来解决这个问题。

<!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>

关于css - [CSS]如何让它移动到顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30763464/

相关文章:

php - WordPress 失败

jquery - 如何使用语义 ui 赋予按钮剥离效果

用于扩展导航栏的 Javascript 代码无法按预期工作

html - div 中的背景颜色宽度

html - 导航栏上的登录按钮不在位

CSS 在 IE 中固定 div 最大高度?

css - ionic 4 - 为整页设置背景图片

css - React Router Dom v6 - 事件导航上的悬停样式

asp.net - Twitter bootstrap + asp.net masterpages,当用户选择它时如何将导航栏项目设置为事件?

javascript - 图例在 JS 中重叠我的图表