为什么li没有排成一行？谢谢
慕神6115920
2017-09-07 22:28
<!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>
4回答
-
- 一只胡思乱想的猪
- 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都会自动排成一行
-
- 慕神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不影响，仅仅脱离了文档流，内容该怎么显示就怎么显示。
-
- 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;
}你这个用了绝对定位，把它去掉就好！ -
- Cam_
- 2017-09-07 22:59:50
你没有给他们设宽度 给.container或ul设个宽度就可以了
初识HTML(5)+CSS(3)-升级版
1225297 学习 · 18230 问题
相似问题