                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

为什么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

源自：初识HTML(5)+CSS(3)-升级版 13-9

关注问题我要回答

2622

操作

收起

4 回答

一只胡思乱想的猪回答被采纳 +2 积分
2017-09-11

我替楼上的小伙伴解答了吧,虽然码字有点麻烦

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-17 回复有任何疑惑可以回复我~

一只胡思乱想的猪回复慕神6115920 提问者

不客气

2017-09-20 回复有任何疑惑可以回复我~

慕神6115920 提问者
2017-09-08

通过楼上朋友的建议，现在总结了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

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

1 回复有任何疑惑可以回复我~

收起回答

慕神6115920 提问者

谢谢。目前有3个解决方法：1、div.container去掉float:left ;2、.container ul设置宽度；3、你的办法，.container ul去掉absolute；我实际不想知道答案（解决办法），因为我自己测试的时候已经找到了前2个办法，我最想知道的是原因在哪里，为什么会这样显示，我想不通为什么这样设置会出错？

2017-09-08 回复有任何疑惑可以回复我~

Cam_
2017-09-07

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

0 回复有任何疑惑可以回复我~

收起回答

慕神6115920 提问者

谢谢，一般不用设置宽度，ul是块级元素占满行，因为设置了float，宽度自动会根据内容最小化。

2017-09-08 回复有任何疑惑可以回复我~

慕神6115920 提问者

你可以测试一下，这就是一行 <style type="text/css"> ul{ border:1px dotted red; float:left; } li{ display:inline;} </style> </head> <body> <ul> <li>11</li> <li>111</li> <li>11</li> </ul> </body>

2017-09-08 回复有任何疑惑可以回复我~

慕神6115920 提问者

一般不设置宽度，可为什么设置宽度会排成一行？谢谢

2017-09-08 回复有任何疑惑可以回复我~