底部li始终没有办法居中显示，我用了绝对定位，但感觉不妥，还有没有更好的办法？

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    body{
        margin:0px;
        padding:0px;
        font-family:"微软雅黑";
    }
    .header{
        position:fixed;
        top:0;
        width:100%;
        height:100px;
        background-color:black;
    }
    .logo{
        width:300px;
        height:100px;
        float:left;
        overflow:hidden;
    }
    .nav{
        width:550px;
        height:100px;
        float:right;
        text-align:center;
        line-height:100px;
    }
    .nav-ul{ 
        float:right;
        overflow:hidden;
        color:#fff;
        margin:auto 0;
    }
    .nav-ul-li{
        text-align:center;
        font-size:24px;
        float:left;
        overflow:hidden;
        margin:0 20px;
    }
    a{
        text-decoration:none;
        color:#fff;
    }
    .kongbai{
        width:100%;
        height:100px;
    }
    .main{
        margin:0 auto;
        font-size:0;/*去除图片之间的空隙*/
        width:100%;
        height:480px;
    }
    .main img{
        width:100%;/*图片自适应*/
    }
    .footer{
        position:fixed;
        bottom:0;
        width:100%;
        height:100px;
        background-color:black;
    }
    .footer ul{
        width:100%;
        height:100px;
        margin:0 auto;
        text-align:center;
    }
    .footer ul li{
        float:left;
        overflow:hidden;
        text-align:center;
        line-height:100px;
        font-size:24px;
        margin:0 60px;
        position:relative;
        left:12%;
    }
  </style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <a href="#">
                <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
            </a>
        </div>
        <div class="nav">
                <ul class="nav-ul" type="none">
                    <li class="nav-ul-li"><a href="#">课程</a></li>
                    <li class="nav-ul-li"><a href="#">职业路径</a></li>
                    <li class="nav-ul-li"><a href="#">实战</a></li>
                    <li class="nav-ul-li"><a href="#">猿问</a></li>
                    <li class="nav-ul-li"><a href="#">手记</a></li>
                </ul>
        </div>
    </div>
        <div class="kongbai"></div>
        <div class="main">
            <img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg"/>
            <img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg"/>
            <img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg"/>
        </div>
        <div class="footer">
            <ul type="none">
                <li><a href="#">网站首页</a></li>
                <li><a href="#">企业合作</a></li>
                <li><a href="#">人才招聘</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">友情链接</a></li>
            </ul>
        </div>
</body>
</html>

底部li始终没有办法居中显示，我用了绝对定位，但感觉不妥，还有没有更好的办法？

Ev4ngel 2018-12-05

源自：CSS网页布局基础 2-7 编程练习

0

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2018-12-05 10:08:31

你好同学 ,你理解的是对的 . 因为内容宽度设置成100% , 设置居中也看不到效果 . 建议同学设置固定宽度 , 宽度恰好可以放下整个ul的内容即可 :

li去掉定位 , 超出隐藏也不需要设置

ul宽度正好可以放下所有的li即可居中:

另外 ,初始化的样式建议使用通配符设置:

祝学习愉快 ,望采纳 .

Ev4ngel 提问者 #1

.footer ul的width设置固定值后还能自适应吗？

2018-12-05 13:00:30
好帮手慕夭夭回复提问者 Ev4ngel #2

你好同学 ,固定宽度的元素不会自适应了 .本练习中尾部内容不需要自适应 . 如果同学还是不想设置固定宽度 , 可以去掉ul的宽度并设置display: inline-block; .然后给.footer设置 text-align: center; 让里面的内容居中也可以 .

2018-12-05 15:14:59
Ev4ngel 提问者回复好帮手慕夭夭 #3

哦哦，懂了，谢谢老师！

2018-12-05 16:47:52

提问者 Ev4ngel 2018-12-05 00:37:29

我好像知道时为什么了，.footer的width我设置成100%，.footer ul的width我也设置成100%了。我把.footer ul的width改设置成80%了，就居中了。取消了.footer ul li的绝对定位也没有问题！

相似问题

老师为什么我给底部设置了绝对定位它还是不在底部

为什么middle没有设置定位，就能够直接使用margin：0 auto？

老师帮忙看下作业，感觉底部导航没有水平对齐，有没有什么好的方法

请问为什么要设置固定定位?li不是已经这么设置了吗？

我总感觉我做的是样子差不多，但是里面很混乱..经不起推敲，有没有参考的代码啊老师

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36712 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号