关于li文档居中问题

来源：4-3 项目作业

jia_蛙

2019-10-17 11:27:55

老师 当我使li产生右边距之后，我该怎么设置里面的内容居中，我试了很久都没成功。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Career Buoilder</title>
<link rel="stylesheet" type="text/css" href="css\index.css">
<script type="text/javascript" src="js\index.js"></script>
</head>
<body>
<div class="web-page">
<!-- 顶部区 -->
<div class="page-top">
<!-- logo -->
<div class="page-logo"><a href="#"><img src="images\logo.png"></a></div>
<!-- 导航栏 -->
<div class="navigation-bar">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">COUNTACT</a></li>
</ul>
</div>
</div>
<!-- banner区 -->
<div class="banner">
</div>
<!-- ABOUT区 -->
<div></div>
<!-- GALLERY区 -->
<div></div>
<!-- 页脚区 -->
<div></div>
</div>

</body>
</html>

*{
	font-family: Microsoft YaHei UI;
	margin:0px;
	padding:0px;
}

/*设置整个网页的宽度为100% 效果就是和浏览器宽度一样*/
.web-page{
	width: 100%;
}

/*设置顶部属性*/
.web-page .page-top{
	/*设置宽度和浏览器一样 高度 颜色  左浮动*/
	width: 100%;
	height: 60px;
	background-color:#07cbc9;
	float:left;
}

/*设置logo为左浮动*/
.web-page .page-top .page-logo{
	/*使logo居中*/
	line-height: 60px; 
	/*左浮动*/
	float:left;
	/*左边距*/
	margin-left: 50px;
}

/*设置右标题栏为右浮动  标题栏div宽度为父级的40%*/
.web-page .page-top .navigation-bar{
	width: 50%;
	float:right;
	/*设置ul的行高和顶部top高度一样使内容居中*/
	line-height: 60px;
}


/*设置导航的样式:none 并设置左浮动*/
.web-page .page-top .navigation-bar ul li{
	list-style: none;
	float:left;
	/*设置宽度*/
	width: 90px;
	margin-right: 10px;

}

.web-page .page-top .navigation-bar ul li:hover{
	background-color: black;
}

/*设置超链接样式*/
.web-page .page-top .navigation-bar ul li a{
	/*去掉文字a标签下划线*/
	text-decoration: none;
	color: #ffffff;
	/*给字体加粗*/
	font-weight: bold;
	font-size: 0.9em;
}

/*设置banner区*/

写回答

1回答