为什么li没有排成一行？谢谢

源自：13-9 Relative与Absolute组合使用

为什么li没有排成一行？谢谢

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container{
    float:left;
   position:relative;
   left:50%;
   border:1px solid blue;
}
.container ul{
   list-style:none;
   margin:0;
   padding:0;
   position:absolute;
   left:-50%;
   border:1px solid red;
}
.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>

提问者：慕神6115920 2017-09-07 22:28

个回答

一只胡思乱想的猪

2017-09-11 17:32:13

已采纳

我替楼上的小伙伴解答了吧,虽然码字有点麻烦
1.1 设置float后会自动把块级元素的行框缩短至内容+内边距+外边距+边框大小,你如果给div设置了足够的width或者padding就会发现也会排列成一行.
1.2 删除float以后div的宽度变成body的100%,div右移50%,后面ul又相对div向左移动了50%,所以会左对齐,同时也证实了1.3的宽度是div的宽度这一点.
1.3 -50%中的50%指的是父元素的宽度,即div的宽度.
```
.container{
    padding:50px;
    float:left;
    position:relative;
    left:50%;
    border:1px solid blue;
}
```
2.这个问题同1.1,设置的宽度不会被缩减,所以可以排成一列
3.绝对定位移动后会生成一个块级框,而不论原来它在正常流中生成何种类型的框,同时会缩减块级元素行框大小.删除absolute或者改为relative都会自动排成一行

0
慕神6115920

2017-09-08 09:57:06

通过楼上朋友的建议，现在总结了3个解决方法：
1、div.container去掉float:left ; 结果：li成了一行，但ul不居中了，除非再把ul的left:-50%;去掉
问题：1》为什么去掉float后li成一行？
2》为什么去掉float后ul才会左对齐？
3》去掉float后，div是relative，ul是absolute，ul的偏移应该参照父元素div，那么left:-50%;的50%是谁的宽度的50%？
2、.container ul设置宽度；
问题：一般ul不需要设置宽度，li设置好后自成一行。为什么设置了ul的宽度后，才会一列？
3、你的办法，.container ul去掉absolute；
问题：为什么要去掉absolute？？？我感觉absolute不影响，仅仅脱离了文档流，内容该怎么显示就怎么显示。

0
p_h_per

2017-09-07 23:29:11

.container ul{
   list-style:none;
   margin:0;
   padding:0;
   position:absolute;
   left:-50%;
   border:1px solid red;
}你这个用了绝对定位，把它去掉就好！

1
Cam_

2017-09-07 22:59:50

你没有给他们设宽度给.container或ul设个宽度就可以了

0