CSS中使用ul和li实现居中
<html><head><title></title><styletype="text/css">li{float:left;position:relative;left...
<html>
<head>
<title></title>
<style type="text/css">
li {float: left; position: relative; left: -50%;margin-right: 5px;}
</style>
</head>
<body>
<ul style="position: relative; left: 50%; float:left; ">
<li>hello</li>
<li>world</li>
</ul>
</body>
</html>
上面是源代码，我想知道
1、为什么把ul的float设成left，直接用relative和left控制不也可以么？
2、li中的position跟left我不太理解，-50%应到是向以前的位置的左边移动，可为什么是50%呢？
谢谢你们的热心，但是如果觉得自己的回答么有实质性帮助的话，就不要浪费您宝贵的时间了 展开
<head>
<title></title>
<style type="text/css">
li {float: left; position: relative; left: -50%;margin-right: 5px;}
</style>
</head>
<body>
<ul style="position: relative; left: 50%; float:left; ">
<li>hello</li>
<li>world</li>
</ul>
</body>
</html>
上面是源代码，我想知道
1、为什么把ul的float设成left，直接用relative和left控制不也可以么？
2、li中的position跟left我不太理解，-50%应到是向以前的位置的左边移动，可为什么是50%呢？
谢谢你们的热心，但是如果觉得自己的回答么有实质性帮助的话，就不要浪费您宝贵的时间了 展开
5个回答
展开全部
通常情况li上加float:left是为了让标签并排显示，如果不加的话默认就是换行的
而上面加position: relative; left: -50%;这个可能是写代码的人想让每个标签都向左移动一半的位置，有点像是书页或者纸张层叠的效果，也许可以不用相对定位来处理，可以加例如margin-left:-100px;一样可以达到效果，只不过这样需要把li的宽度固定，要不然就效果不太好了
再来说一下让标签居中的样式好了，其实上面加的<ul style="position: relative; left: 50%; float:left; ">有点问题，加了position: relative; left: 50%;就没必要加 float:left; 了而且应该是无效的
还有就是position: relative; left: 50%;并不能达到真正居中的效果，因为这样加只是以标签的左边线为中心，实质效果是标签是偏右的，如果非要让标签用position来实现居中的话，那么就应该是下面这种样式，例如：<div style="position:absolute;left:50%; top:50%; width:200px; height:100px;margin-left:-100px;margin-top:-50px; background:red;"></div>
你把这段标签直接放入body中试试就能看到了，div是绝对处于浏览器的居中位置
不过建议如果你想让标签居中，还是使用常用方法吧margin:0 auto;，尽量少用position属性来设定，
而上面加position: relative; left: -50%;这个可能是写代码的人想让每个标签都向左移动一半的位置，有点像是书页或者纸张层叠的效果，也许可以不用相对定位来处理，可以加例如margin-left:-100px;一样可以达到效果，只不过这样需要把li的宽度固定，要不然就效果不太好了
再来说一下让标签居中的样式好了，其实上面加的<ul style="position: relative; left: 50%; float:left; ">有点问题，加了position: relative; left: 50%;就没必要加 float:left; 了而且应该是无效的
还有就是position: relative; left: 50%;并不能达到真正居中的效果，因为这样加只是以标签的左边线为中心，实质效果是标签是偏右的，如果非要让标签用position来实现居中的话，那么就应该是下面这种样式，例如：<div style="position:absolute;left:50%; top:50%; width:200px; height:100px;margin-left:-100px;margin-top:-50px; background:red;"></div>
你把这段标签直接放入body中试试就能看到了，div是绝对处于浏览器的居中位置
不过建议如果你想让标签居中，还是使用常用方法吧margin:0 auto;，尽量少用position属性来设定，
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
position有5种参数,用得多的也就是absolute/relative/fixed三种.
其中relative的概念就是,会相对父级元素定位,且占用实际位置,如果你不使用浮动的话,那么就无法获得正确的偏移量.
事实上这里你用不用无序列表都是一样的,关键是弄清楚绝对定位和相对定位的区别.
你想要获得居中的框架,直接用div的效果也是一样的.这里面你有疑惑的li为什么要用position:relative;和float:left;事实上这里只是该作者的个人习惯而已,并不是唯一的技术参照.
原因就是这里的无序列表没有父级div提供定位,也没有在页面初始化的时候使用margin:0 auto;来使无序列表居中.因为写这段代码的人并没有对ul和li的宽度进行定义,所以只能用相对定位来获得居中效果.
其中relative的概念就是,会相对父级元素定位,且占用实际位置,如果你不使用浮动的话,那么就无法获得正确的偏移量.
事实上这里你用不用无序列表都是一样的,关键是弄清楚绝对定位和相对定位的区别.
你想要获得居中的框架,直接用div的效果也是一样的.这里面你有疑惑的li为什么要用position:relative;和float:left;事实上这里只是该作者的个人习惯而已,并不是唯一的技术参照.
原因就是这里的无序列表没有父级div提供定位,也没有在页面初始化的时候使用margin:0 auto;来使无序列表居中.因为写这段代码的人并没有对ul和li的宽度进行定义,所以只能用相对定位来获得居中效果.
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
Vue实践-CSS样式position/display/float属性对比使用
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
