请问这里为什么用absolute,显示结果就是123竖向排列了。什么原因？

<!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; 请问这里为什么用absolute,显示结果就是123竖向排列了。什么原因 left:-50%;}.container li{float:left;margin-right:8px;}/*下面是代码任务区*/.wrap-center{ background:#ccc; }</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>

查看完整描述

2 回答

煊_煊

TA贡献8条经验获得超4个赞

ul绝对定位后，没有给定宽度的话，就内容为宽度了，你可以看下在控制台查看元素里看下他有什么变化，如果你给定了宽度给他，只要内容不超过他的宽度，就还是一排显示。

1 反对回复 2018-01-01

慕田峪8701529
自己已经弄清楚了，主要还是因为ul设置了绝对定位后就脱离了标准文档流，父容器div这时候的宽高就变成0了，ul没有设置宽高的话就继承父容器的宽高，而父容器的宽高这时候是都是0，所以就导致了一列显示

回复 2018-01-01

习惯受伤

TA贡献885条经验获得超1144个赞

因为ul和container都没有给宽度，浏览器不知道怎么布局了

1 反对回复 2017-12-31

慕田峪8701529
那为啥把ul换成相对定位后就可以了呢

回复 2017-12-31
习惯受伤
相对定位时ul元素是块元素，本身就有宽高度，自动的

回复 2017-12-31
慕田峪8701529
ul本来不就是块级元素么。

回复 2017-12-31

点击展开后面2条

请问这里为什么用absolute,显示结果就是123竖向排列了。什么原因？

请问这里为什么用absolute,显示结果就是123竖向排列了。什么原因？

2 回答

相关问题推荐

添加回答

热搜

最近搜索清空

请问这里为什么用absolute,显示结果就是123竖向排列了。什么原因？

请问这里为什么用absolute,显示结果就是123竖向排列了。什么原因？

2 回答

相关问题推荐

添加回答