用了float:left又用position:relative。为什么？
HTML+CSS基础课程中第15-5课中，div的float:left起的什么作用？li的float:left又起什么作用？为什么不直接使用display:inline-block？
下面附上原代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
</html>
安之以祖古浏览 1278回答 1
1回答
-
陌卍言
虽然不知道你在说什么，但是我可以告诉你原理，由于父元素不定宽，是由里面的元素撑开的，这个时候你给父元素浮动，然后相对左位移50%的时候，父元素左边界刚好居中，然后给子元素一个相对父元素的-50%左位移，这个时候子元素就会整体看起来居中，关键点是：父元素的宽度是等于子元素，是由子元素撑开的
随时随地看视频慕课网APP
Html/CSS